Tabbing out of Menu does not close the menu [preact]

[ryan-codingintrigue]

When using preact rather than standard React, the closeOnBlur method does not fire correctly unless the focus is on the role="menu" element directly.

I think this is due to preactjs/preact#872.

If we change:

react-aria-menubutton/src/Menu.js

Line 86 in c64f2ee

menuProps.onBlur = ambManager.handleBlur;

To use onFocusOut instead which, according to facebook/react#6410 does bubble:

menuProps.onFocusOut = ambManager.handleBlur;

The functionality works as expected.

Is this worth a PR? I think it should work for both Preact & React.

[shirshendubhowmick]

@ryan-codingintrigue I personally haven't tried with preact yet. I will have to try that out once. However can you raise a PR ?

[ryan-codingintrigue]

@shirshendubhowmick Thanks! Generally preact is a 1-1 replacement for React, but there are a few edge cases.

This isn't a problem with this library as such, but changing the code here is the only way to get this to work with Preact 😦

[shirshendubhowmick]

Allow me some time to review this out.

[vutran]

It seems like the fix needs to happen on the preact-compat layer instead so that it's emulated 1:1 instead of a workaround in this library.

[ryan-codingintrigue]

@vutran That is a discussion for sure. I linked the issue in the PR which discusses that. Their response is that they won’t do that unless it is required by a “popular” library 🤔

I took a while to finish the PR because we’ve moved to React too to try and avoid these issues so I am happy to close it and leave it just for reference purposes. If someone down the line needs it we could re-open