Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[EuiSuperDatePicker] Support onFocus (#4924) #6320
[EuiSuperDatePicker] Support onFocus (#4924) #6320
Changes from 1 commit
12c045e
feb1649
b3aad72
0fec4de
52717c0
ffb6e14
71e6086
87d75db
File filter
Filter by extension
Conversations
Jump to
There are no files selected for viewing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Setting an
onClick
/onKeyUp
on EuiFormControlLayout isn't the approach I would go with. I would strongly prefer that we instead pass theonFocus
callback directly to each underlying EuiDatePickerRange (which now acceptsonFocus
as of #6136)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried to follow this approach from ChoicePicker. But I agree its not the right approach. I have tried to introduce onFocus with buttonProps on
EuiDatePopoverButton
but it was invoking the function twice. I then introduce it directly on the<button>
tag on date_popover_button.tsx to look at the issue more closely (you can check the latest commit update) but to no avail.I suspect that this issue is linked to opening of Panel and therefore peeked into _popover_panel.tsx code:
Specifically, if I comment
{...rest}
and{children}
both, the onFocus call is then made once, but I wasn't able to find the exact cause of the issue. Any suggestion would be appreciated.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi Uzair! After a little bit of testing locally, the "double" focus events appear to primarily occur when the super date picker popover that each button toggles closes. This is due to the
returnFocus
logic used by our focus trap library & logic.Whenever a dialogue that traps focus within itself (popovers, modals, and flyouts) closes, EUI attempts to return focus to the button that toggled the popover. This works great for keyboard users and escape key presses, but provides an extra "noisy" focus event in scenarios like this for mouse users who click out of a popover into another focusable item (e.g. clicking between the start date and end date button/inputs). You can see this behavior more clearly by changing your onFocus to log the event target, e.g.
onFocus: (e) => console.log(e.target, new Date())
.To be honest, the extra onFocus events don't totally bother me and it feels like it is 'working as intended' (programmatically, the button is briefly recapturing focus on popover close). Do you feel like the extra event is prohibitively annoying to consumers?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi Constance, thanks for putting your time into this. Let's say a user wants to attach an API call to this onFocus event or maybe just as simple as popping an element from some stack. How would he prevent it from happening twice then?
It seems like, then still the solution through
onClick/onKeyUp
(although a very bad workaround) creates an expected behavior from the user's standpoint, rather than this one.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would personally suggest wrapping a
requestAnimationFrame(() => { if (e.target === document.activeElement) ... }
in their logic to ensure the event trigger is still the current focus/active element before continuing.The dupe event may not be an issue for consumers depending on what they're doing (e.g. just checking that any button within EuiSuperDatePicker has focus), but I consider it a lesser evil over conflating event types.
To be honest we have other "dupe"/empty focus/blur/change events in other places in EUI - this would not be the first and in my opinion is not a bug / can be worked around. It is simply accurately representing the events natively occurring under the hood, and I tend to err on the side of exposing/relying on native events over smoothing them over if there isn't a specific UX goal in mind.
It depends on what the consumer is trying to accomplish - "expected behavior" is entirely dependent on the goal in mind. Honestly, the concept of 'focusing into EuiSuperDatePicker' is an inherently questionable one, because there's 4-5 different items within what we consider "the EuiSuperDatePicker component" that can all individually take focus. This PR considers the "date/time inputs" (not really inputs, they're actually buttons toggling popovers) to be what matters for focus, but another consumer might want to know about focus on every single button. Without an actual UX story/case in mind, it's difficult to write code in a vacuum for the unknown.
I do feel very strongly about not conflating
onClick/onKeyUp
withonFocus
. They're simply not the same type of event whatsoever and will end up creating event type headaches down the road vs sticking to a consistent API/event type.If we want to really make a super robust focus behavior, my suggestion would be setting a custom
onFocus
andonBlur
handler on the parent EuiFlexGroup that checks the currentdocument.activeElement
and stores anisFocused
flag in state, and callprops.onFocus
if that state changes from false to true. Doing so will let you more granularly examine whether focus has moved between child buttons within the EuiSuperDatePicker and not fireprops.onFocus
if so.Again, that's a lot more manual JS & logic than simply letting consumers deal with duplicate onFocus events however, so without a use-case in mind I would lean towards the simpler option. But if you're interested in trying it out, feel free!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alright, make sense, I updated the code with buttonProps logic, and also removed the previous workaround. Please review whenever you have time :)