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
Related Issues
The
inputvariant ofPaginationrenders aTextInputwhere users can type a page number to jump to.Currently, entering any non-numeric string (e.g.
"abc") causeshandleInputChangeto storeNaNincontrolCurrentPage, which is then rendered back into the field as the string"NaN". The!isNaNguard ingetInputWidthClass(line 210) was added specifically to paper over this, which confirms the bug is known.Non-Numeric Input Produces
NaNhandleInputChangepassesevent.target.valuedirectly toparseIntwithout stripping non-digit characters first:parseInt("abc", 10)returnsNaN.NaNis notundefined, so theif (inputValue !== undefined)branch runs, the clamping is skipped,NaNis written into state, and the field displays"NaN".The fix is to strip non-digit characters before parsing:
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
inputModeandpatternThe
TextInputis rendered withoutinputMode="numeric"orpattern="[0-9]*". Adding both gives mobile users a numeric keyboard without usingtype="number"(which renders browser-native spin arrows).Deprecated
onKeyPresshandleKeyPressis wired to theTextInputvia theonKeyPressprop (line 268), which is deprecated in React. Replace withonKeyDown.Sub-tasks
handleInputChangebefore callingparseIntinputMode="numeric"andpattern="[0-9]*"to theTextInputin theinputvariantonKeyPresswithonKeyDownonTextInputand renamehandleKeyPressaccordinglyNaNin the input fieldRelated Issues