feat(props): add onInputValueChange (#230)

* fix: cursor jumping to end of input

provide an onInputValueChange callback to allow to update controlled prop
before its old value is used to re-render the children
causing the cursor in the input to jump to the end in the next render

* Update downshift.js

* docs: add documentation for onInputValueChange

README.md

@@ -249,6 +249,16 @@ but differ slightly.
 > so it's not recommended to use it if you can avoid it. If you need it, please
 > open an issue to discuss solidifying the API.
 
+### onInputValueChange
+
+> `function(inputValue: string, stateAndHelpers: object)` | optional, no useful default
+
+Called whenever the input value changes. Useful to use instead or in combination of `onStateChange` when `inputValue` is a controlled prop to [avoid issues with cursor positions](https://github.com/paypal/downshift/issues/217). 
+
+- `inputValue`: The current value of the input
+- `stateAndHelpers`: This is the same thing your `children` prop
+  function is called with (see [Child Callback Function](#child-callback-function))
+
 ### itemCount
 
 > `number` | optional, defaults the number of times you call getItemProps

src/__tests__/downshift.props.js

@@ -90,6 +90,39 @@ test('can override onOuterClick callback to maintain isOpen state', () => {
   )
 })
 
+test('onInputValueChange called when changes contain inputValue', () => {
+  const handleInputValueChange = jest.fn()
+  const {selectItem} = setup({
+    onInputValueChange: handleInputValueChange,
+  })
+  selectItem('foo')
+  expect(handleInputValueChange).toHaveBeenCalledTimes(1)
+  expect(handleInputValueChange).toHaveBeenCalledWith(
+    'foo',
+    expect.any(Object),
+  )
+})
+
+test('onInputValueChange not called when changes do not contain inputValue', () => {
+  const handleInputValueChange = jest.fn()
+  const {openMenu} = setup({
+    onInputValueChange: handleInputValueChange,
+  })
+  openMenu()
+
+  expect(handleInputValueChange).toHaveBeenCalledTimes(0)
+})
+
+test('onInputValueChange called with empty string on reset', () => {
+  const handleInputValueChange = jest.fn()
+  const {reset} = setup({
+    onInputValueChange: handleInputValueChange,
+  })
+  reset()
+  expect(handleInputValueChange).toHaveBeenCalledTimes(1)
+  expect(handleInputValueChange).toHaveBeenCalledWith('', expect.any(Object))
+})
+
 function mouseDownAndUp(node) {
   node.dispatchEvent(new window.MouseEvent('mousedown', {bubbles: true}))
   node.dispatchEvent(new window.MouseEvent('mouseup', {bubbles: true}))

src/downshift.js

@@ -31,6 +31,7 @@ class Downshift extends Component {
     itemToString: PropTypes.func,
     onChange: PropTypes.func,
     onStateChange: PropTypes.func,
+    onInputValueChange: PropTypes.func,
     onUserAction: PropTypes.func,
     onClick: PropTypes.func,
     onOuterClick: PropTypes.func,
@@ -62,6 +63,7 @@ class Downshift extends Component {
     id: generateId('downshift'),
     itemToString: i => (i == null ? '' : String(i)),
     onStateChange: () => {},
+    onInputValueChange: () => {},
     onUserAction: () => {},
     onChange: () => {},
     onOuterClick: () => {},
@@ -268,11 +270,23 @@ class Downshift extends Component {
   internalSetState(stateToSet, cb) {
     let onChangeArg
     const onStateChangeArg = {}
+    const isStateToSetFunction = typeof stateToSet === 'function'
+
+    // we want to call `onInputValueChange` before the `setState` call
+    // so someone controlling the `inputValue` state gets notified of
+    // the input change as soon as possible. This avoids issues with
+    // preserving the cursor position.
+    // See https://github.com/paypal/downshift/issues/217 for more info.
+    if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
+      this.props.onInputValueChange(stateToSet.inputValue, {
+        ...this.getStateAndHelpers(),
+        ...stateToSet,
+      })
+    }
     return this.setState(
       state => {
         state = this.getState(state)
-        stateToSet =
-          typeof stateToSet === 'function' ? stateToSet(state) : stateToSet
+        stateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet
         // this keeps track of the object we want to call with setState
         const nextState = {}
         // this is just used to tell whether the state changed
@@ -287,6 +301,7 @@ class Downshift extends Component {
           onChangeArg = stateToSet.selectedItem
         }
         stateToSet.type = stateToSet.type || Downshift.stateChangeTypes.unknown
+
         Object.keys(stateToSet).forEach(key => {
           // onStateChangeArg should only have the state that is
           // actually changing
@@ -308,6 +323,16 @@ class Downshift extends Component {
             nextState[key] = stateToSet[key]
           }
         })
+
+        // if stateToSet is a function, then we weren't able to call onInputValueChange
+        // earlier, so we'll call it now that we know what the inputValue state will be.
+        if (isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
+          this.props.onInputValueChange(stateToSet.inputValue, {
+            ...this.getStateAndHelpers(),
+            ...stateToSet,
+          })
+        }
+
         return nextState
       },
       () => {