Focus of menu button on close seems incorrect.

[achambers]

When I click out side of the menu, say on another button, when the menu closes it sets focus back on the menu button whereas I'd expect the focus to remain on the element I just clicked on. I'm not clear if it makes sense to refocus the button at all. Maybe it does under some circumstances but unsure what they are. In short though, the example below doesn't make sense so there is some improvement that could be made:

In this screencast I'm doing the following:

1. Click on the 3rd dropdown
2. Click on the 2nd dropdown
3. Press up/down keys which opens the 3rd dropdown again.

Screen.Recording.2021-06-18.at.10.36.56.mov

I think the offending code is here:

ember-headlessui/addon/components/menu.js

Lines 35 to 37 in 57f3da1

	next(() => {
	document.getElementById(this.buttonGuid).focus();
	});

[alexlafroscia]

Maybe it should only re-focus the button on ESC (once #54 is fixed)? Or if the element clicked on is not itself interactive?

[achambers]

Maybe it should only re-focus the button on ESC (once #54 is fixed)? Or if the element clicked on is not itself interactive?

Both reasonable suggestions to me. Which do you prefer @alexlafroscia ?

[alexlafroscia]

#58 fixes this by allowing a focus-trap on the Menu::Items element (which should have a focus trap and currently does not) handle re-focusing the previous element, so the behavior becomes "whatever focustrap.js does by default", which is probably good enough! It seems to work nicely from what I can tell but I haven't tried multiple menus adjacent to each other where we bounce between them. Could you try pulling that PR and seeing if the way it handles things feels good in the example that you showed here?