Fluentui: Dropdowns in small screens cannot be closed otherwise than selecting an item

[eblancperso]

Codepen demonstrating the issue

https://codepen.io/eblancperso/pen/PMGvVx?&editable=true

Actual behavior:

Shrink your browser window size to have a maximum width of 600px (so that a right panel with items is displayed upon clicking the dropdown).
Click outside this panel. It doesn't close (it was closing in Fabric 6)

Expected behavior:

It should close the panel upon clicking outside.

Documentation describing expected behavior

Also, in a multi-select Dropdown, you cannot close the panel, even when selecting items.

[ecraig12345]

Did some investigation on this before noticing it had been reassigned to @behowell, so here are my notes anyway since I'd already written them.

---

Looks like @aftab-hassan tried to fix this in #9538, but even in the deploy link for that PR, tapping/clicking in the area outside the dropdown options panel doesn't close the panel.

Internally, the dropdown uses IPanelProps.onDismissed to handle dismissing the panel. As of @jdhuntington's change #8713, onDismissed is called only after the panel has already been dismissed. (The Fabric 6 variant of a related change, #8710 by @joschect, seems to still work.)

And here's a codepen demonstrating the issue.
https://codepen.io/ecraig12345/full/EqNPPd

[msft-github-bot]

:tada:This issue was addressed in #9958, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site