Clicking the trigger button when the menu is open does not close the menu on Safari and Firefox

[matthewsecrist]

• downshift version: 3.4.2
• node version: n/a
• npm (or yarn) version: n/a

Relevant code or config
https://codesandbox.io/s/53qfj (the example in the repo)

What happened:

• Open the above link in either Safari or Firefox
• Click the trigger button, see the menu open
• Click the trigger button again, the menu does not close, but rather re-opens
• On Chrome, the menu does close as expected.

Problem description:
Clicking the trigger button when the menu is open does not close the menu on Safari and Firefox

Suggested solution:
Unsure if this is expected behavior with those two browsers or if this is something that should be addressed.

[silviuaavram]

we need to look into this.

[silviuaavram]

relatedTarget from blur event is not the button in this case, as it is in Chrome. Will probably need to augment the check to work for Safari and Firefox, like here facebook/react#2011 (comment)

[silviuaavram]

    if (
      event.relatedTarget !== toggleButtonRef.current &&
      // https://github.com/downshift-js/downshift/issues/832 - workaround for Firefox.
      !(
        event.nativeEvent &&
        (toggleButtonRef.current === event.nativeEvent.explicitOriginalTarget ||
          toggleButtonRef.current.contains(
            event.nativeEvent.explicitOriginalTarget,
          ))
      )
    ) {

This should fix Firefox. I could not find something for Safari so far.

[silviuaavram]

Reopen it for Safari.

[anilanar]

#837 breaks useSelect because there's no guarantee that toggleButton exists. Downshift and useSelect can be used without trigger buttons.

In particular, nextElement.contains(event.nativeEvent.explicitOriginalTarget), in which nextElement is toggleButtonRef.current which can be null when a menu is blurred.

[silviuaavram]

useSelect cannot be used without toggleButton as it's a <select> not a <combobox>. But yes we should add more relevant errors like please make sure you used getToggleButtonProps inside the hook.

[silviuaavram]

🎉 This issue has been resolved in version 5.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[mskelton]

This appears to be broken again in version 5.4.5 of Downshift. I'm noticing the issue both in my code as well as the example on the useSelect docs: https://www.downshift-js.com/use-select. This is only breaking for me on Firefox, Safari seems to be fine.