fix: resolve iOS touch blur issue (#429)

* fix: resolve iOS touch blur issue

* fix: update even stateChangeType and tests

Author: aMollusk

src/__tests__/downshift.lifecycle.js

@@ -46,6 +46,42 @@ test('handles mouse events properly to reset state', () => {
   expect(handleStateChange).toHaveBeenCalledTimes(1)
 })
 
+test('handles state change for touchevent events', () => {
+  const handleStateChange = jest.fn()
+  const renderSpy = jest.fn(({getToggleButtonProps}) => (
+    <button {...getToggleButtonProps({'data-testid': 'button'})} />
+  ))
+
+  const MyComponent = () => (
+    <Downshift onStateChange={handleStateChange} render={renderSpy} />
+  )
+  const {queryByTestId, container, unmount} = render(<MyComponent />)
+  document.body.appendChild(container)
+
+  const button = queryByTestId('button')
+
+  // touch outside for coverage
+  document.body.dispatchEvent(
+    new window.TouchEvent('touchstart', {bubbles: true}),
+  )
+
+  // open menu
+  Simulate.click(button)
+  jest.runAllTimers()
+
+  expect(handleStateChange).toHaveBeenCalledTimes(1)
+
+  // touch outside downshift
+  document.body.dispatchEvent(
+    new window.TouchEvent('touchstart', {bubbles: true}),
+  )
+
+  jest.runAllTimers()
+  expect(handleStateChange).toHaveBeenCalledTimes(2)
+
+  unmount()
+})
+
 test('props update causes the a11y status to be updated', () => {
   setA11yStatus.mockReset()
   const MyComponent = () => (

src/__tests__/downshift.props.js

@@ -127,8 +127,8 @@ test('uses given environment', () => {
   const {unmount, setHighlightedIndex} = setup({environment})
   setHighlightedIndex()
   unmount()
-  expect(environment.addEventListener).toHaveBeenCalledTimes(2)
-  expect(environment.removeEventListener).toHaveBeenCalledTimes(2)
+  expect(environment.addEventListener).toHaveBeenCalledTimes(3)
+  expect(environment.removeEventListener).toHaveBeenCalledTimes(3)
 })
 
 test('can override onOuterClick callback to maintain isOpen state', () => {

src/downshift.js

@@ -116,6 +116,7 @@ class Downshift extends Component {
     blurButton: '__autocomplete_blur_button__',
     controlledPropUpdatedSelectedItem:
       '__autocomplete_controlled_prop_updated_selected_item__',
+    touchStart: '__autocomplete_touchstart__',
   }
 
   constructor(...args) {
@@ -881,13 +882,28 @@ class Downshift extends Component {
           )
         }
       }
+      // Touching an element in iOS gives focus and hover states, but touching out of
+      // the element will remove hover, and persist the focus state, resulting in the
+      // blur event not being triggered.
+      const onTouchStart = event => {
+        const targetInDownshift =
+          this._rootNode && isOrContainsNode(this._rootNode, event.target)
+        if (!targetInDownshift && this.getState().isOpen) {
+          this.reset({type: Downshift.stateChangeTypes.touchStart}, () =>
+            this.props.onOuterClick(this.getStateAndHelpers()),
+          )
+        }
+      }
+
       this.props.environment.addEventListener('mousedown', onMouseDown)
       this.props.environment.addEventListener('mouseup', onMouseUp)
+      this.props.environment.addEventListener('touchstart', onTouchStart)
 
       this.cleanup = () => {
         this._isMounted = false
         this.props.environment.removeEventListener('mousedown', onMouseDown)
         this.props.environment.removeEventListener('mouseup', onMouseUp)
+        this.props.environment.removeEventListener('touchstart', onTouchStart)
       }
     }
   }