Dropdown in iOS Safari cannot be re-opened while focused

• downshift version: 1.31.6

Relevant code or config

button_handleClick = event => {
  event.preventDefault()
  // handle odd case for Safari and Firefox which
  // don't give the button the focus properly.
  /* istanbul ignore if (can't reasonably test this) */
  if (
    this.props.environment.document.activeElement ===
    this.props.environment.document.body
  ) {
    event.target.focus()
  }
  this.toggleMenu({type: Downshift.stateChangeTypes.clickButton})
}

What you did:

In iOS Safari (iPhone 7, iPhone X) the dropdown button was clicked multiple times in succession in order to toggle the menu

What happened:

The menu opened once then closed, then could not be re-opened while the button remained in focus.

Reproduction repository:

This can be reproduced in the official dropdown example - http://downshift.netlify.com/?selectedKind=Examples&selectedStory=dropdown&full=0&addons=1&stories=1&panelRight=0

Problem description:

Focus needs to be removed from the button in order to re-open the menu. This line in the above code appears to cause the issue:

event.target.focus()

This leads to a call to button_handleBlur which ultimately leaves the menu closed.

Suggested solution:

[aMollusk]

I’ve had a bit of a mess around with this in browserstack, and I think @dalehurwitz is correct. It’s also due to the setTimeout inside the button_handleBlur.

I’ve had success by wrapping the toggleMenu call inside a setTimeout, but it feels like a band-aid for a band-aid. This does however preserve the existing focus behaviour for safari/firefox/chrome, while resolving the bug in iOS.

[kentcdodds]

Thanks for confirming @aMollusk!

I’m fine with adding a bit of complexity to the codebase to handle bugs like this. If someone would like to open a PR to fix this that’d be super 😃