fix: handle NaN appropriately with value, type, and status

influxdata · Nov 7, 2019 · 360878b · 360878b
1 parent eb72814
commit 360878b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### 1.0.5 (Unreleased)
 
+- [#373](https://github.com/influxdata/clockface/pull/373): Handle NaN appropriately in numeric Inputs by updating value, type, and status
 - [#368](https://github.com/influxdata/clockface/pull/368): Ensure `Popover` visible prop is not overridden by being out of view
 
 ### 1.0.4

diff --git a/src/Components/Inputs/Documentation/Inputs.stories.tsx b/src/Components/Inputs/Documentation/Inputs.stories.tsx
@@ -4,6 +4,7 @@ import marked from 'marked'
 
 // Storybook
 import {storiesOf} from '@storybook/react'
+import {useState} from '@storybook/addons'
 import {
   withKnobs,
   radios,
@@ -131,35 +132,41 @@ inputsBaseStories.add(
 
 inputsBaseStories.add(
   'Input (Number)',
-  () => (
-    <div className="story--example">
-      <Input
-        min={number('min', 0)}
-        max={number('max', 50)}
-        value={number('value', 25)}
-        onChange={() => {}}
-        name={text('name', 'Name')}
-        titleText={text('titleText', 'Title Text')}
-        disabledTitleText={text('disabledTitleText', 'Disabled Title Text')}
-        maxLength={number('maxLength', 24)}
-        icon={
-          IconFont[
-            select('icon', {None: 'none', ...mapEnumKeys(IconFont)}, 'None')
-          ]
-        }
-        style={object('style', defaultInputStyle)}
-        status={
-          ComponentStatus[
-            select('status', mapEnumKeys(ComponentStatus), 'Default')
-          ]
-        }
-        size={
-          ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]
-        }
-        type={InputType.Number}
-      />
-    </div>
-  ),
+  () => {
+    const [value, setValue] = useState<number>(25)
+
+    return (
+      <div className="story--example">
+        <Input
+          min={number('min', 0)}
+          max={number('max', 50)}
+          value={value}
+          onChange={e =>
+            setValue(e.target.value === '' ? NaN : Number(e.target.value))
+          }
+          name={text('name', 'Name')}
+          titleText={text('titleText', 'Title Text')}
+          disabledTitleText={text('disabledTitleText', 'Disabled Title Text')}
+          maxLength={number('maxLength', 24)}
+          icon={
+            IconFont[
+              select('icon', {None: 'none', ...mapEnumKeys(IconFont)}, 'None')
+            ]
+          }
+          style={object('style', defaultInputStyle)}
+          status={
+            ComponentStatus[
+              select('status', mapEnumKeys(ComponentStatus), 'Default')
+            ]
+          }
+          size={
+            ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]
+          }
+          type={InputType.Number}
+        />
+      </div>
+    )
+  },
   {
     readme: {
       content: marked(InputReadme),

diff --git a/src/Components/Inputs/Input.tsx b/src/Components/Inputs/Input.tsx
@@ -125,21 +125,27 @@ export const Input = forwardRef<InputRef, InputProps>(
     },
     ref
   ) => {
+    const correctStatus = value === value ? status : ComponentStatus.Error
+
     const inputClass = classnames('cf-input', {
       [`cf-input-${size}`]: size,
       'cf-input__has-checkbox': type === InputType.Checkbox,
       'cf-input__has-icon': icon,
-      'cf-input__valid': status === ComponentStatus.Valid,
-      'cf-input__error': status === ComponentStatus.Error,
-      'cf-input__loading': status === ComponentStatus.Loading,
-      'cf-input__disabled': status === ComponentStatus.Disabled,
+      'cf-input__valid': correctStatus === ComponentStatus.Valid,
+      'cf-input__error': correctStatus === ComponentStatus.Error,
+      'cf-input__loading': correctStatus === ComponentStatus.Loading,
+      'cf-input__disabled': correctStatus === ComponentStatus.Disabled,
       [`${className}`]: className,
     })
 
     const inputCheckboxClass = classnames('cf-input--checkbox', {checked})
 
-    const correctlyTypedValue: string | number =
-      type === InputType.Number ? Number(value) : `${value}`
+    const correctlyTypedValue: string | number = value === value ? value : ''
+    const correctType: string = value === value ? type : 'text'
+    const correctlyTypedMin: string | number | undefined =
+      min === min ? min : ''
+    const correctlyTypedMax: string | number | undefined =
+      max === max ? max : ''
 
     const iconElement = icon && <Icon glyph={icon} className="cf-input-icon" />
 
@@ -150,7 +156,7 @@ export const Input = forwardRef<InputRef, InputProps>(
       <div className={inputClass} style={style} ref={containerRef}>
         {type !== InputType.Checkbox && (
           <StatusIndicator
-            status={status}
+            status={correctStatus}
             shadow={true}
             testID={testID}
             size={size}
@@ -159,14 +165,14 @@ export const Input = forwardRef<InputRef, InputProps>(
         <input
           id={id}
           ref={ref}
-          min={min}
-          max={max}
+          min={correctlyTypedMin}
+          max={correctlyTypedMax}
           step={step}
           checked={checked}
           title={title}
           autoComplete={autocomplete}
           name={name}
-          type={type}
+          type={correctType}
           value={correctlyTypedValue}
           placeholder={placeholder}
           autoFocus={autoFocus}