feat(ui-number-input): add back options for string input

Closes: INSTUI-4384
instructure · Dec 2, 2024 · ce86cdb · ce86cdb
1 parent 2586791
commit ce86cdb
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/packages/ui-number-input/src/NumberInput/README.md b/packages/ui-number-input/src/NumberInput/README.md
@@ -2,7 +2,9 @@
 describes: NumberInput
 ---
 
-A controlled number input field. Note that this field **does not work
+A controlled number input field.
+By deafult, it renders a `<intput type="number">` to the DOM. However, if you need any string value, use the `allowStringValue` flag. Only use this if absolutely necessary, since it could be confusing for screenreader users.
+Note that this field **does not work
 uncontrolled** - you must pass event handlers if you want it to respond to
 user input.
 
@@ -300,12 +302,11 @@ type: embed
 ---
 <Guidelines>
   <Figure recommendation="yes" title="Do">
-    <Figure.Item>Use when the input is limited to a number (integer, rational, or irrational expressed with decimal points)</Figure.Item>
+    <Figure.Item>Use when you need increment/decrement functionality</Figure.Item>
     <Figure.Item>Use labels at the top or to the left of the input field</Figure.Item>
   </Figure>
   <Figure recommendation="no" title="Don't">
     <Figure.Item>Place labels or text strings to the right of the input field</Figure.Item>
-    <Figure.Item>Use for alphanumeric input</Figure.Item>
   </Figure>
 </Guidelines>
 ```
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,7 +237,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       showArrows,
       value,
       width,
-      styles
+      styles,
+      allowStringValue
     } = this.props
 
     const { interaction } = this
@@ -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 {

diff --git a/packages/ui-table/src/Table/Head/index.tsx b/packages/ui-table/src/Table/Head/index.tsx
@@ -68,7 +68,7 @@ class Head extends Component<TableHeadProps> {
     let sortable = false
     if (firstRow && firstRow.props && firstRow.props.children) {
       Children.forEach(firstRow.props.children, (grandchild) => {
-        if (grandchild.props.onRequestSort) {
+        if (grandchild?.props?.onRequestSort) {
           sortable = true
           return
         }