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

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

[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

[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.