Dropdown select does not work on iOS (safari)

• downshift version: http://downshift.netlify.com/
• node version:
• npm (or yarn) version:

What you did: Tried dropdown example

What happened: I can open dropdown by clicking button, but I can’t select any other item

[alfredringstad]

So I finally had some time to look into this. While I thought this was related to the original issue, I now realised that my problem might not be what @vonwao intended. If that is the case, I’m sorry for stealing this issue.

My problem exists when the toggle button is a <button> element. When I press the toggle button the first time, it opens the menu as it should. I can select other items in the list, or press anywhere else on the page to trigger the blur event and close the menu. However, if I instead press the toggle button again (so first toggle button to open, then toggle button to close), the menu stays open. This happens in Safari on iOS. I tried it out using the Xcode simulator on an iPhone 6 running iOS 9.

The problem seems to be that Safari on iOS triggers a blur event before the onClick event, if the button was manually focused. This causes, as I posted in a comment above, that the menu is first reset (isOpen = false) and then toggled (isOpen = true). I think the desired behaviour is that the menu should only be toggled (isOpen = false).

To fix this, I found a solution where we can store the blur event target and compare it to the active selection and see if it’s the same element that is focused again. In that case we shouldn’t trigger the blur action.

This code example would solve this problem:

  button_handleBlur = event => {
    const target = event.target; // Need to save this reference since it's not available on event when we're inside the setTimeout function
    // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
    setTimeout(() => {
      if (
        !this.isMouseDown &&
        (this.props.environment.document.activeElement == null ||
          this.props.environment.document.activeElement.id !== this.inputId) &&
        this.props.environment.document.activeElement !== target // Make sure same element is not re-focused
      ) {
        this.reset({type: Downshift.stateChangeTypes.blurButton})
      }
    })
  }

Note that this is only a problem when the toggle button is a <button> element.

Another possible workaround (that could have some more side effects) is to use preventDownshiftDefault on the onBlur method:

<button
  {...getToggleButtonProps({
    onBlur: e => (e.preventDownshiftDefault = true) // Workaround for a Downshift bug in Safari on iOS where onBlur is wrongfully triggered before onClick
  })}
>
  Toggle button
</button>;

I’d happily create a pull request if you think my code example is a good solution for this.

[Drapegnik]

Sorry, it was my issue: I did not use getMenuProps and targetWithinDownshift(event.target, false) return false, so it was interpreted as outside click.