fix: normalize when enter is pressed

Author: jedwards1211

src/createNumericField.js

@@ -6,6 +6,7 @@ type NumberNormalizer = (value: ?(string | number)) => ?(string | number)
 type Validator = (value: any, allValues: Object, props: Object) => ?any
 const WHITESPACE = /^\s*$/
 
+
 function createNumericField<P: {validate?: Validator | Array<Validator>, normalizeOnBlur?: Function}>(
   Field: React.ComponentType<P>
 ): React.ComponentType<P & {normalizeNumber?: NumberNormalizer}> {
@@ -45,16 +46,35 @@ function createNumericField<P: {validate?: Validator | Array<Validator>, normali
       }
     }
 
+    KeyDownHandler = ({input, onKeyDown, ...props}) => {
+      const Comp = this.props.component
+
+      return (
+        <Comp
+          {...props}
+          input={input}
+          onKeyDown={(event: KeyEvent) => {
+            const normalizeNumber = this.props.normalizeNumber || defaultNormalize
+            if (event.keyCode === 13) {
+              input.onChange(normalizeNumber(input.value))
+            }
+            if (onKeyDown) onKeyDown(event)
+          }}
+        />
+      )
+    }
+
     render(): React.Node {
       const {
-        normalizeNumber, // eslint-disable-line no-unused-vars
+        normalizeNumber, component, // eslint-disable-line no-unused-vars
         ...props
       } = this.props
       return (
         <Field
           {...props}
           validate={this.validate}
           normalizeOnBlur={this.normalizeOnBlur}
+          component={this.KeyDownHandler}
         />
       )
     }

test/index.js

@@ -12,7 +12,7 @@ import {reduxForm as immutableReduxForm, reducer as immutableReducer} from 'redu
 import {NumericField} from '../src'
 import {NumericField as ImmutableNumericField} from '../src/immutable'
 
-const Input = ({input: props}): React.Node => <input {...props} />
+const Input = ({input: inputProps, innerRef, ...props}): React.Node => <input {...inputProps} {...props} ref={innerRef} />
 
 function min(threshold: number): (value: number) => ?string {
   return (value: number) => {
@@ -223,6 +223,31 @@ describe('NumericField', () => {
       comp.update().find(Input).simulate('blur')
       expect(comp.update().find('input').prop('value')).to.equal(46.8)
     })
+    it('normalizes when enter is pressed', () => {
+      const store = createStore(combineReducers({form: reducer}))
+
+      let input
+      const Form = reduxForm({form: 'form'})(() => (
+        <form>
+          <NumericField
+            name="hello"
+            component={Input}
+            innerRef={c => input = c}
+          />
+        </form>
+      ))
+
+      const comp = mount(
+        <Provider store={store}>
+          <Form />
+        </Provider>
+      )
+
+      comp.find(Input).simulate('focus')
+      comp.find(Input).simulate('change', {target: {value: ' 23.4 '}})
+      comp.update().find(Input).simulate('keydown', {keyCode: 13})
+      expect(comp.update().find('input').prop('value')).to.equal(23.4)
+    })
   }
   describe('pojo', () => tests({NumericField, reducer, reduxForm}))
   describe('immutable', () => tests({