ClickAwayListener for Focus?

[Matt-Butler]

Summary

Hey there!

I was wondering if there's something similar to the ClickAwayListener but for focus events. I'm building a custom input with a Popper, and I want to close it when a user tabs out. For clicks, the ClickAwayListener works perfectly, but it would be great if it also handled tabbing away. Does something like this exist?

Thank you for your time!

Examples

No response

Motivation

No response

Search keywords: ClickAwayListener

[DiegoAndai]

Hey, @Matt-Butler, thanks for reaching out. Have you tried using the blur event (onBlur)? https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

[Matt-Butler]

Thanks for the recommendation @DiegoAndai

Here is more context. I am building a custom multi select tree. I'm using the Popper component. I think this behavior might be fairly similar to the autocomplete component.

Screen.Recording.2025-01-17.at.10.07.48.AM.mov

I'm probably missing something simple.

[DiegoAndai]

I'm probably missing something simple.

onBlur is what I would use.

[Matt-Butler]

This is what ended up working for me:
onBlur={(e) => e.relatedTarget === null && myMethod()}

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Matt-Butler How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[Matt-Butler]

Thanks @DiegoAndai