Semantic-ui-react: Dropdown: When clicking to close a dropdown, it fires "click" and "blur" events

[hugw]

This issue happens when controlling manually (via states) the status of a dropdown.

Steps

If you click the "Not ok button" to close the drop-down you will notice that it triggers the click and blur events (It shouldn't fire blur cause I'm still inside the component).

Now, if you click the "ok button" repeatedly, you will notice that only the click event is fired, regardless if the dropdown is opening or closing, and the blur happens only when you actually click outside of the related button, as expected.

Expected Result

When clicking the "not ok button" to close a drop-down, it should fire only a click event.

Actual Result

When clicking the "not ok button" to close a drop-down, it fires a click and blur event.

Version

0.78.3
OS: High Sierra

Testcase

https://codesandbox.io/s/3q781mpvw1

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[levithomason]

Thanks for the report and test case. Here's our problem in Dropdown.js, the close handler is explicitly calling blur

handleClose = () => {
  debug('handleClose()')
  const hasSearchFocus = document.activeElement === this.searchRef
  const hasDropdownFocus = document.activeElement === this.ref
  const hasFocus = hasSearchFocus || hasDropdownFocus
  // https://github.com/Semantic-Org/Semantic-UI-React/issues/627
  // Blur the Dropdown on close so it is blurred after selecting an item.
  // This is to prevent it from re-opening when switching tabs after selecting an item.
  if (!hasSearchFocus) {
    this.ref.blur()
  }

  // We need to keep the virtual model in sync with the browser focus change
  // https://github.com/Semantic-Org/Semantic-UI-React/issues/692
  this.setState({ focus: hasFocus })
}

I believe the culprit is #627 (see inline comments in code above). Rather than blurring the Dropdown to prevent the issue noted, it seems we should be detecting when the browser tab is switched back and not reopen.

I'd investigate which methods are being called when the browser tab is switched away and back. That process needs to not re-open the Dropdown AND we should retain its focus.

[willb335]

I deleted

if (!hasSearchFocus) {
    this.ref.blur()
  }

from Dropdown.js and it fires only the click event. Also, #627 seems to be unaffected. I'll write some tests and issue a pull request

[willb335]

If I am missing something please let me know! Thanks

[willb335]

I have a pull request at #2776

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[stale[bot]]

This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them!

[stale[bot]]

This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them!