[EuiComboBox] options list fails to open when icon clicked with animated width

[nickofthyme]

Describe the bug
Clicking the dropdown icon EuiComboBox with flex-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

• EUI version: 88.1.0
• Kibana version: 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.

[JasonStoltz]

Hey @nickofthyme.

I'm unsure if this is UI we want to encourage in Kibana. Is this an established pattern elsewhere?

CC @andreadelrio

[andreadelrio]

Hey @nickofthyme.

I'm unsure if this is UI we want to encourage in Kibana. Is this an established pattern elsewhere?

CC @andreadelrio

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.

[nickofthyme]

@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.

[JasonStoltz]

Thank you for the additional context. We'll review with the team.

[cee-chen]

Would #7192 be a better option instead? (expanding the popover width instead of the entire input)

[nickofthyme]

@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.

[github-actions]

👋 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.

Log | Bot Usage

[cee-chen]

@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;
  }

[nickofthyme]

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.

[cee-chen]

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