[DropdownMenu] Multiple submenu do not close when losing document focus

[ivanbanov]

If you focus outside of the document while the DropdownMenu is open the submenus wont close properly

https://user-images.githubusercontent.com/2953018/171471289-e4a9a743-1ed4-43b0-bfd4-76f3b60e2b28.mov

[andy-hook]

Hi @ivanbanov , this is due to how focus events behave in this very specific case e.g. “focused within browser chrome but outside of viewport” , we did entertain the idea of disabling the interactions to cover it but it’s very uncommon for typical users to see it as they will generally be active within the viewport while interacting.

I hope that at least explains the problem, we may revisit it in the future if folks consider this a big issue but for now I’m going to close the issue 🙏

[benoitgrelard]

@andy-hook I wonder if one way to mitigate this here would be to handle things a bit like in Tooltip or HoverCard where when you blur out of the document, the component closes. I know it's different cause for those it's a result of onBlur doing its thing, but maybe there's something here we could do similarly.

[andy-hook]

@andy-hook I wonder if one way to mitigate this here would be to handle things a bit like in Tooltip or HoverCard where when you blur out of the document, the component closes. I know it's different cause for those it's a result of onBlur doing its thing, but maybe there's something here we could do similarly.

That's not a bad idea, in the original discussion the context was around the dev tool but as this seemingly applies to other standard browser controls it could be worth doing something like that for the cleaner experience.

[Sherif-Elhefnawy]

Hi there, We just bumped into this issue as well, and I am wondering if there is any progress on this or if there is a workaround.