-
Notifications
You must be signed in to change notification settings - Fork 843
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
[EuiComboBox] options list fails to open when icon clicked with animated width #7170
Comments
Hey @nickofthyme. I'm unsure if this is UI we want to encourage in Kibana. Is this an established pattern elsewhere? |
Hi @JasonStoltz. We do something similar with the KQL input in the Unified Search Bar. This is a last-resort type of situation where we have decided on this solution given that the fix on EUI seems very hard to achieve and has been closed as not-planned. Our best-case scenario would be for EuiComboBox to expand its dropdown to display the values without any cutoffs. |
@JasonStoltz I agree the usage would be pretty rare and discouraged, only to be used in certain cases. But those cases, like KQL and the unified search filter are highly visible/used components and would be nice to smooth out the width change with an animation. Not absolutely necessary but a nice to have eventually. |
Thank you for the additional context. We'll review with the team. |
Would #7192 be a better option instead? (expanding the popover width instead of the entire input) |
@cee-chen I don't think so since the usage for the unified search filter input is to show the selected value with minimal truncation. @andreadelrio may have a better take on the matter. |
👋 Thank you for your suggestion or request! While the EUI team agrees that it's valid, it's unlikely that we will prioritize this issue on our roadmap. We'll leave the issue open if you or anyone else in the community wants to implement it by contributing to EUI. If not, this issue will auto close in one year. |
@andreadelrio Definitely let us know if you'd like to brainstorm an alternative UX approach/solution! @nickofthyme As a heads up this is pretty low priority for us, primarily due to the this being kind of an edge case UX interaction most consumers won't ever encounter. That being said, we have a CSS-only workaround you could consider using: check out the following CodeSandbox: https://codesandbox.io/s/xenodochial-resonance-3r5w5j?file=/src/App.tsx:307-512 The primary workaround uses CSS pointer-events to avoid click shenanigans on the arrow icon: [data-test-subj="comboBoxToggleListButton"] {
pointer-events: none;
} The other following selectors optionally restore cursor indicators for mouse users: .euiComboBox__inputWrap {
cursor: pointer;
}
.euiComboBoxPill--plainText,
.euiComboBox__input {
cursor: text;
} |
Yeah I get it's a low priority just making note for you all to do with as you wish. Thanks @cee-chen I'll take a look. |
Closing this as a wontfix. This is an issue specific to a consumer usage of EuiComboBox, and is addressable by an alternate (and better in terms of a11y) approach implemented in elastic/kibana#171439 |
Describe the bug
Clicking the dropdown icon
EuiComboBox
withflex-grow
styles on parent causes failed focus and options list to never open. See gif below....Impact and severity
The issue is likely pretty rare to encounter and has a workaround to manually focus the input with
onFocus
callback, without animations.Environment and versions
88.1.0
8.11.0
Expected behavior
Dropdown opens options when input or icon is clicked.
Minimum reproducible sandbox
https://codesandbox.io/s/white-cookies-pp783k?file=/src/App.tsx
Additional context
This bug only seems to appear when the icon is moving such that when focused the element widens and the icon shifts. If the element width grows but the icon does not move, the focus works correctly, see this with the right
EuiComboBox
in the demo.Ideally the solution to this allows for animating the width without being glitchy.
The text was updated successfully, but these errors were encountered: