Add a useFocusOutside React hook #27549
Conversation
youknowriad
added
the
[Type] New API
youknowriad
requested review from
ajitbohra and
chrisvanpatten
as code owners
|
I already had a PR for this: #27050 |
|
I'm sorry I missed your PR. I think though I prefer the current one for a few reasons:
|
|
Yes, my PR wasn't ready at all, it was just an exploration. I had problems making the unit tests pass. |
|
Size Change: +20.4 kB (1%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
Oops, me too 😄 #27369 I avoided DOM event handlers (event though using a ref is a nicer pattern), as I don't think that'll work for nested modals/popovers, which rely on virtual bubbling of events. But maybe there's another way to handle this. Returning the ref is definitely a nicer API. The easiest way to test this that I've found is to use the 'Display Button Labels' option with a smaller screen size and the try accessing the nested popovers in the Tools menu (Outline or Details). |
I'm on the fence. Logically speaking it seems we want to avoid React virtual bubbling here because technically speaking this is an a11y behavior that rely on DOM and doesn't know anything about slots. That said it goes against "nested popovers" or "nested modals". I wonder if it's a use-case we want to support and whether it's acceptable to just close the parent. Let's go with your approach for now. |
|
@talldan How would you merge multiple event handlers? The implementor has to merge all the props? Personally I think I'd prefer DOM event handlers. |
|
I'm going to close this for now, I also prefer DOM event handlers but I can't see how we can solve the nested modals/popovers issue with them. |
|
@ellatrix There was a bit of discussion about the event handlers here with a few different ideas - #27369 (comment). @youknowriad I do prefer returning I don't know if we could try something using context to get a similar bubbling behavior, but still use DOM event handlers. The way I'm imagining something where context consumers can register themselves and then also trigger a |
|
@talldan worth trying, let's land your first implementation as experimental and see whether we can do this separately. |
Follow-up to #27502
Similar to #27544
This refactors the existing withConstrainedTabbing HoC as a React hook to avoid the extra wrapper.
The goal here is to be able to remove the PopoverWrapper component that is duplicated across three packages and reuse a single hook.