feat: add onFocusIn, onFocusOut, onEscape callback props#4259
feat: add onFocusIn, onFocusOut, onEscape callback props#4259
onFocusIn, onFocusOut, onEscape callback props#4259Conversation
217d55b to
e09b121
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4259 +/- ##
=======================================
Coverage 97.35% 97.35%
=======================================
Files 888 889 +1
Lines 26031 26057 +26
Branches 9411 9420 +9
=======================================
+ Hits 25343 25369 +26
- Misses 641 682 +41
+ Partials 47 6 -41 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| * must update the `open` prop to close the dropdown. | ||
| */ | ||
| onDropdownClose?: NonCancelableEventHandler<null>; | ||
| onOutsideClick?: NonCancelableEventHandler<null>; |
There was a problem hiding this comment.
Should we also include onEscape - like we have in the tooltip component?
Alternatively, we can parametrise onDropdownClose e.g. with some reason: "click-outside" | "escape".
There was a problem hiding this comment.
I can go with onEscape since it matches the tooltips API.
| }; | ||
|
|
||
| const focusOutHandler = (event: React.FocusEvent) => { | ||
| if (!event.relatedTarget || isOutsideDropdownContent(event.relatedTarget)) { |
There was a problem hiding this comment.
Internally we use onBlur which fires any time an element inside the dropdown content looses focus. So we check if the focus actually leaves the dropdown.
onFocusIn and onFocusOut callback propsonFocusIn, onFocusOut, onEscape callback props
f592fb5 to
bee3915
Compare
Description
onFocusIn,onFocusIn,onEscapeevent handlers to the Dropdown componentonDropdownClosetoonOutsideClickSee proposal
RGJgABPXohP8for more context.How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.