fix(search-bar): Retain position in value combobox when multi-selecting

[nsdeschenes]

This PR updates the combobox's so that they retain the users select position when multi-selecting items, and will sort the checked items to the top after they have closed and re-opened the combobox.

Ticket: EXP-357

Before:

Screen.Recording.2025-10-10.at.10.55.39.mov

After:

Screen.Recording.2025-10-10.at.11.00.48.mov

[linear]

EXP-357 Selecting Multiple Values via keyboard causes you to lose the selection

[codecov]

❌ 3 Tests Failed:

Tests completed	Failed	Passed	Skipped
12111	3	12108	10

View the top 3 failed test(s) by shortest run time

SearchQueryBuilder token values sets the value as not selected when no comma is present

Stack Traces | 0.598s run time

TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and name "Toggle randomValue"

Here are the accessible roles:

  grid:

  Name "Query Builder":
  ...

  --------------------------------------------------
  row:

  Name "browser.name:Firefox":
  ...

  --------------------------------------------------
  gridcell:

  Name "Firefox,randomValue":
  ...

  --------------------------------------------------
  combobox:

  Name "Edit filter value":
  ...

  --------------------------------------------------

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.getByRole (.../components/searchQueryBuilder/index.spec.tsx:1859:30)

SearchQueryBuilder token values sets the value as selected when a trailing comma is present

Stack Traces | 0.781s run time

TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and name "Toggle randomValue"

Here are the accessible roles:

  grid:

  Name "Query Builder":
  ...

  --------------------------------------------------
  row:

  Name "browser.name:Firefox":
  ...

  --------------------------------------------------
  gridcell:

  Name "Firefox,randomValue, Hold Ctrl to select multiple Type to search suggestions Wildcard (*) matching allowed":
  ...

  --------------------------------------------------
  combobox:

  Name "Edit filter value":
  ...

  --------------------------------------------------
  separator:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  listbox:

  Name "Suggestions":
  ...

  --------------------------------------------------
  presentation:

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  group:

  Name "":
  ...

  --------------------------------------------------
  option:

  Name "Firefox":
  ...

  Name "Chrome":
  ...

  Name "Safari":
  ...

  Name "Edge":
  ...

  --------------------------------------------------
  paragraph:

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  checkbox:

  Name "Toggle Firefox":
  ...

  Name "Toggle Chrome":
  ...

  Name "Toggle Safari":
  ...

  Name "Toggle Edge":
  ...

  --------------------------------------------------

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.getByRole (.../components/searchQueryBuilder/index.spec.tsx:1878:30)

SearchQueryBuilder keyboard interactions selects the value when pressing enter after typing it in

Stack Traces | 0.862s run time

TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and name "Toggle randomValue"

Here are the accessible roles:

  grid:

  Name "Query Builder":
  ...

  --------------------------------------------------
  row:

  Name "browser.name:Firefox":
  ...

  --------------------------------------------------
  gridcell:

  Name "Firefox,randomValue":
  ...

  --------------------------------------------------
  combobox:

  Name "Edit filter value":
  ...

  --------------------------------------------------

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.getByRole (.../components/searchQueryBuilder/index.spec.tsx:1721:30)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}