[Input] should accommodate number and string values

src/Input/Input.js

@@ -6,11 +6,44 @@ import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import Textarea from './Textarea';
 
+export const isString = (value: ?(string | number)) => typeof value === 'string';
+export const isNumber = (value: ?(string | number)) => !isNaN(parseFloat(value));
+
+/**
+ * @param value
+ * @returns {boolean} true if string or number (including zero)
+ */
+export function hasValue(value: ?(number | string)) {
+  if (isString(value)) {
+    return true;
+  } else if (isNumber(value)) {
+    return true;
+  }
+  return !!value;
+}
+
+/**
+ * Determine if field is dirty (a.k.a. filled).
+ *
+ * Response determines if label is presented above field or as placeholder.
+ *
+ * @param obj
+ * @param SSR
+ * @returns {boolean} False when not present or empty string.
+ *                    True when number or string with length.
+ */
 export function isDirty(obj, SSR = false) {
+  if (!obj) {
+    return false;
+  }
+
+  if (isNumber(obj.value) || (SSR && isNumber(obj.defaultValue))) {
+    return true;
+  }
+
   return (
-    obj &&
-    ((obj.value && obj.value.toString().length) ||
-      (SSR && obj.defaultValue && obj.defaultValue.toString().length)) > 0
+    (hasValue(obj.value) && obj.value.toString().length > 0) ||
+    (SSR && hasValue(obj.defaultValue) && obj.defaultValue.toString().length > 0)
   );
 }
 
@@ -369,8 +402,16 @@ class Input extends Component<DefaultProps, AllProps, State> {
     }
   };
 
+  /**
+   * A controlled input accepts its current value as a prop, as well as a callback
+   * to change that value.
+   *
+   * @returns {boolean}
+   * @see https://facebook.github.io/react/docs/forms.html#controlled-components
+   */
   isControlled() {
-    return typeof this.props.value === 'string';
+    const { onChange, value } = this.props;
+    return !!onChange && hasValue(value);
   }
 
   checkDirty(obj) {

src/Input/Input.spec.js

@@ -5,7 +5,7 @@ import { assert } from 'chai';
 import { spy } from 'sinon';
 import { createShallow, createMount, getClasses } from '../test-utils';
 import Textarea from './Textarea';
-import Input, { isDirty } from './Input';
+import Input, { hasValue, isDirty, isNumber } from './Input';
 
 describe('<Input />', () => {
   let shallow;
@@ -95,39 +95,52 @@ describe('<Input />', () => {
   });
 
   describe('controlled', () => {
-    let wrapper;
-    let handleDirty;
-    let handleClean;
-
-    before(() => {
-      handleClean = spy();
-      handleDirty = spy();
-      wrapper = shallow(<Input value="" onDirty={handleDirty} onClean={handleClean} />);
-    });
-
-    it('should check that the component is controlled', () => {
-      const instance = wrapper.instance();
-      assert.strictEqual(instance.isControlled(), true, 'isControlled() should return true');
-    });
-
-    it('should have called the handleClean callback', () => {
-      assert.strictEqual(handleClean.callCount, 1, 'should have called the onClean cb');
-    });
+    ['', 0].forEach(value => {
+      describe(`${typeof value} value`, () => {
+        let wrapper;
+        let handleDirty;
+        let handleClean;
+
+        before(() => {
+          handleClean = spy();
+          handleDirty = spy();
+          wrapper = shallow(
+            <Input value={value} onChange={() => {}} onDirty={handleDirty} onClean={handleClean} />,
+          );
+        });
 
-    it('should fire the onDirty callback when dirtied', () => {
-      assert.strictEqual(handleDirty.callCount, 0, 'should not have called the onDirty cb yet');
-      wrapper.setProps({ value: 'hello' });
-      assert.strictEqual(handleDirty.callCount, 1, 'should have called the onDirty cb');
-    });
+        it('should check that the component is controlled', () => {
+          const instance = wrapper.instance();
+          assert.strictEqual(instance.isControlled(), true, 'isControlled() should return true');
+        });
 
-    it('should fire the onClean callback when dirtied', () => {
-      assert.strictEqual(
-        handleClean.callCount,
-        1,
-        'should have called the onClean cb once already',
-      );
-      wrapper.setProps({ value: '' });
-      assert.strictEqual(handleClean.callCount, 2, 'should have called the onClean cb again');
+        // don't test number because zero is a dirty state, whereas '' is not
+        if (!isNumber(value)) {
+          it('should have called the handleClean callback', () => {
+            assert.strictEqual(handleClean.callCount, 1, 'should have called the onClean cb');
+          });
+
+          it('should fire the onDirty callback when dirtied', () => {
+            assert.strictEqual(
+              handleDirty.callCount,
+              0,
+              'should not have called the onDirty cb yet',
+            );
+            wrapper.setProps({ value: typeof value === 'number' ? 2 : 'hello' });
+            assert.strictEqual(handleDirty.callCount, 1, 'should have called the onDirty cb');
+          });
+
+          it('should fire the onClean callback when dirtied', () => {
+            assert.strictEqual(
+              handleClean.callCount,
+              1,
+              'should have called the onClean cb once already',
+            );
+            wrapper.setProps({ value });
+            assert.strictEqual(handleClean.callCount, 2, 'should have called the onClean cb again');
+          });
+        }
+      });
     });
   });
 
@@ -345,14 +358,37 @@ describe('<Input />', () => {
     });
   });
 
+  describe('hasValue', () => {
+    ['', 0].forEach(value => {
+      it(`is true for ${value}`, () => {
+        assert.strictEqual(hasValue(value), true);
+      });
+    });
+
+    [null, undefined].forEach(value => {
+      it(`is false for ${value}`, () => {
+        assert.strictEqual(hasValue(value), false);
+      });
+    });
+  });
+
   describe('isDirty', () => {
-    it('should support integer', () => {
-      assert.strictEqual(
-        isDirty({
-          value: 3,
-        }),
-        true,
-      );
+    [' ', 0].forEach(value => {
+      it(`is true for value ${value}`, () => {
+        assert.strictEqual(isDirty({ value }), true);
+      });
+
+      it(`is true for SSR defaultValue ${value}`, () => {
+        assert.strictEqual(isDirty({ defaultValue: value }, true), true);
+      });
+    });
+    [null, undefined, ''].forEach(value => {
+      it(`is false for value ${value}`, () => {
+        assert.strictEqual(isDirty({ value }), false);
+      });
+      it(`is false for SSR defaultValue ${value}`, () => {
+        assert.strictEqual(isDirty({ defaultValue: value }, true), false);
+      });
     });
   });
 });