fix(Dropdown): reopens after switching back to browser window

[Chris-R3]

Steps

1. open Dropdown docs
2. select/click on any item from the first example (file dropdown)
3. switch to another browser tab/window/application
4. switch back to Dropdown docs browser tab

Expected

Dropdown should still be closed since no user interaction happened.

Result

Dropdown opened / is visible without user interaction.

Testcase

Dropdown docs

I tested this with the latest version of Chrome(Win10 & macOS) and the latest version of Safari (macOS).
The Selection, Single Option and Multiple Options examples work as expected!

[levithomason]

I'm not sure this should be considered a bug. The Dropdown closes on blur, click outside, escape key, or item select. None of these happen on tab switch, so it never closes.

None of the Dropdown examples close for me when switching to a new tab, so they are all open when I switch back.

Chrome 53.0.2785.143
MacOS X 10.10.5

Lastly, this is also the behavior of the Dropdown in SUI core. Closing as I don't think we should change anything here.

[levithomason]

Another way of looking at it is this, the user opened the menu so expecting:

Dropdown should still be closed since no user interaction happened.

I don't think makes sense, since the user never gave interaction to close it initially. Hope that helps clarify.

[Chris-R3]

The dropdown is already closed (after selecting an item) before switching to another tab/window! So when I switch back to the dropdown it should stay closed.

[levithomason]

Oh boy, shame on me for skipping step 2, thanks for the clarification.

Best guess is that the focus event is being called again, therefore opening the Dropdown. We probably need to blur the element after select. This map also address https://github.com/TechnologyAdvice/stardust/issues/573 actually, since the focus will no longer be applied.

[rodryquintero]

Hello. I copied and pasted the code on the Menu example and got this error.

This happens after I try to click on the dropdown to close it. It is also triggered on any click after the first one.

Here is the render function code:

return <Menu fixed="top" inverted={false}>
       <Dropdown as={Menu.Item} icon='wrench' simple>
          <Dropdown.Menu>
            <Dropdown.Item>
              <Icon />
              <span className='text'>New</span>

              <Dropdown.Menu>
                <Dropdown.Item>Document</Dropdown.Item>
                <Dropdown.Item>Image</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown.Item>
            <Dropdown.Item>Open</Dropdown.Item>
            <Dropdown.Item>Save...</Dropdown.Item>
            <Dropdown.Item>Edit Permissions</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Header>Export</Dropdown.Header>
            <Dropdown.Item>Share</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
    </Menu>
  }

I am using the latest version of React Semantic.

[levithomason]

See #659