[EuiSelectable] Fix unvirtualized variant crashing on selecting option

[weronikaolejniczak]

Summary

Updated EuiSelectable querying from #${selector} (id selector) to [id="${selector}"] (attribute selector) to allow for unescaping special characters like a colon :.

Tests

With the test added and without the fix, the whole test suite is failing due to an uncaught Syntax Error:

as expected. That is enough to cover this bug but I added additional assertion for the scroll behavior itself.

Why are we making this change?

It has been reported on Slack and on #8740 that unvirtualized EuiSelectable is causing issues when selecting an option. The before-mentioned task is unrelated.

The issue is recent, likely appeared after Kibana's transition to React 18.

The reason is when the list is not virtualized, the component attemps to scroll the active option into view and it queries the element with an id selector (#id). Well, in React 18 the generated IDs (via useId) can contain colons (:r1o: like in your stack trace).: denotes a pseudo-class in CSS selector and so it causes a syntax error when used without escaping. The fix is to update id selector to attribute selector ([id="id"]).

Here's a quick reproduction Codesandbox.

Screenshots #

Before

536328318-e1c5feed-8650-4859-acee-c9293634d9fc.mov

Impact to users

🟢 This is a bug fix. Not a breaking change. No changes needed on consumer side.

QA

Specific checklist

• Verify scrolling to an active option works as expected (staging docs)

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[acstll]

The fix is working as expected and the code looks correct. I shared one suggestion and a doubt regarding the tests.

Thanks for tackling this one 🙌

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 6da89a0
• Documentation website
• Storybook

History

• 💚 Build #2468 succeeded 837278c
• 💚 Build #2464 succeeded dc4bd28

cc @weronikaolejniczak

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 6da89a0

History

• 💚 Build #5629 succeeded 837278c
• 💔 Build #5625 failed dc4bd28

cc @weronikaolejniczak

[acstll]

🟢 Again thanks for the fix and for addressing my comments 🙌