Skip to content

[Task](ui): fix non-numeric input in Pagination input variant #1877

Description

@franzheidl

The input variant of Pagination renders a TextInput where users can type a page number to jump to.

Currently, entering any non-numeric string (e.g. "abc") causes handleInputChange to store NaN in controlCurrentPage, which is then rendered back into the field as the string "NaN". The !isNaN guard in getInputWidthClass (line 210) was added specifically to paper over this, which confirms the bug is known.

Non-Numeric Input Produces NaN

handleInputChange passes event.target.value directly to parseInt without stripping non-digit characters first:

// Pagination.component.tsx:181
let inputValue = event.target.value ? parseInt(event.target.value, 10) : undefined

parseInt("abc", 10) returns NaN. NaN is not undefined, so the if (inputValue !== undefined) branch runs, the clamping is skipped, NaN is written into state, and the field displays "NaN".

The fix is to strip non-digit characters before parsing:

const digits = event.target.value.replace(/\D/g, "")
let inputValue = digits ? parseInt(digits, 10) : undefined

With this in place, non-digit characters are silently discarded as the user types or pastes. Typing "5ab" or pasting "5ab" would result in "5" being displayed in the field and passed to the callbacks — the letters are stripped before the value reaches state.

Missing inputMode and pattern

The TextInput is rendered without inputMode="numeric" or pattern="[0-9]*". Adding both gives mobile users a numeric keyboard without using type="number" (which renders browser-native spin arrows).

Deprecated onKeyPress

handleKeyPress is wired to the TextInput via the onKeyPress prop (line 268), which is deprecated in React. Replace with onKeyDown.

Sub-tasks

  • Strip non-digit characters in handleInputChange before calling parseInt
  • Add inputMode="numeric" and pattern="[0-9]*" to the TextInput in the input variant
  • Replace deprecated onKeyPress with onKeyDown on TextInput and rename handleKeyPress accordingly
  • Add a test asserting that typing a non-numeric string does not render NaN in the input field
  • Add a test asserting that a non-numeric string will be stripped of any non-numeric characters in the input field

Related Issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    ui-componentsAll tasks related to juno-ui-components library

    Type

    Projects

    Status
    New

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions