fix(ui-number-input): fix regression and allow string type for Number…

…Input again
instructure · Nov 19, 2024 · 17685f8 · 17685f8
1 parent 3ac2582
commit 17685f8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/ui-number-input/src/NumberInput/index.tsx b/packages/ui-number-input/src/NumberInput/index.tsx
@@ -75,7 +75,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
     size: 'medium',
     display: 'block',
     textAlign: 'start',
-    inputMode: 'numeric'
+    inputMode: 'numeric',
+    allowStringValue: false
   }
 
   state: NumberInputState = { hasFocus: false }
@@ -236,6 +237,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       showArrows,
       value,
       width,
+      allowStringValue,
       styles
     } = this.props
 
@@ -274,7 +276,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
               css={this.props.styles?.input}
               aria-invalid={this.invalid ? 'true' : undefined}
               id={this.id}
-              type="number"
+              type={allowStringValue ? 'text' : 'number'}
               inputMode={this.props.inputMode}
               placeholder={placeholder}
               ref={this.handleInputRef}

diff --git a/packages/ui-number-input/src/NumberInput/props.ts b/packages/ui-number-input/src/NumberInput/props.ts
@@ -161,6 +161,11 @@ type NumberInputOwnProps = {
    * The text alignment of the input.
    */
   textAlign?: 'start' | 'center'
+
+  /**
+   * sets the input type to string and allows string as value
+   */
+  allowStringValue?: boolean
 }
 
 type NumberInputState = {
@@ -220,7 +225,8 @@ const propTypes: PropValidators<PropKeys> = {
   onIncrement: PropTypes.func,
   onKeyDown: PropTypes.func,
   inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
-  textAlign: PropTypes.oneOf(['start', 'center'])
+  textAlign: PropTypes.oneOf(['start', 'center']),
+  allowStringValue: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -243,7 +249,8 @@ const allowedProps: AllowedPropKeys = [
   'onIncrement',
   'onKeyDown',
   'inputMode',
-  'textAlign'
+  'textAlign',
+  'allowStringValue'
 ]
 
 export type {