Use Compass Combobox for System Console and Bots custom select and multiselect attributes (#39574)

Bump @mattermost/compass-ui to 0.1.0-alpha.22

Add attribute Combobox helpers

Focus the Combobox input in SettingItemMax, not chips


SettingItemMax picks the first focusable element on mount. Add
input[role=”combobox”] so a Compass Combobox input is eligible, and
exclude [data-chip] so the first chip of a multiple Combobox (tabIndex 0
from ChipGroup’s roving tabindex) is never chosen ahead of the input.
Adds a jsdom a11yFocus shim and initial-focus tests.

Use Compass Combobox for user settings custom attributes

Replace react-select with the Compass Combobox for select, multiselect
and rank custom profile attributes on the General tab, using the shared
attribute_combobox helpers: id and data-testid on the input, translated
labels, z-index 1100 for the modal, a key guard so Enter-to-pick and
Escape-to-close don’t reach SettingItemMax or the modal, and a clear
button key handler so Enter on the clear button doesn’t save.
Missing single ids show as unset; missing multi ids keep raw-id chips
and survive a save. Stored values are never null.
Rewrites the react-select tests and adds structure, value and keyboard
(K1-K7) tests.

Update CPA Playwright helpers for Compass Combobox

editSelectAttribute and editMultiselectAttribute now target the Combobox
input id and its derived listbox, wait on aria-expanded (a closed menu
stays mounted at opacity 0), and pick options by index over all options
in definition order. The multiselect helper asserts a row isn’t already
selected, since clicking a selected row deselects it.
Adds a real-browser keyboard test: Escape with the menu open keeps the
profile modal open, and Enter on an option picks it without saving.

Keep attribute Combobox menu closed when a settings section opens

Compass Combobox (0.1.0-alpha.22) opens its menu from the input’s onFocus
with no prop to opt out, so SettingItemMax focusing the input on expand
opened the menu. SettingItemMax no longer picks a Combobox input, chip,
chip remove button or clear button for initial focus; a section with only
a Combobox now focuses .setting-list (tabindex -1) instead of the
unfocusable 
, so Enter still saves and Tab reaches the field.

The menu now opens only on click, ArrowDown/ArrowUp/Alt+ArrowDown or
typing. Updates SettingItemMax initial-focus tests, the custom attribute
keyboard tests (K1-K10 plus open/filter/Enter-saves cases for select and
multiselect), the snapshots whose fallback focus moved to .setting-list,
and the CPA Playwright helpers and keyboard specs to assert closed, then
open on click.

Mark attribute Combobox wrappers for SettingItemMax initial focus

SettingItemMax skipped Compass’s internal [data-chip] and
[data-combobox-clear] attributes to keep initial focus off a Combobox.
getAttributeComboboxWrapperProps() now adds a webapp-owned
data-attribute-combobox marker, and SettingItemMax skips every form
control and button inside a marked wrapper instead. Behaviour is
unchanged for custom attribute sections.
Tests: SettingItemMax initial-focus tests render the marker directly,
helper tests cover the new prop, and new keyboard tests show that Tab
from an expanded single section opens the menu (Compass opens on focus)
and that Tab in a multiselect with values lands on the first chip with
the menu closed. CPA Playwright helpers and specs also assert focus is
on the section’s .setting-list after expand.

Replace attribute Combobox helpers with an AttributeCombobox component

Move the generic Combobox labels and z-index constants to
components/widgets/combobox, wrap Combobox wiring (guards, clear button,
labels, option mapping, fallback selections) in AttributeCombobox, and
migrate the user settings custom attribute editor to it. The guards stay
unchanged and module-private; the wrapper keeps the data-attribute-combobox
marker SettingItemMax uses to skip initial focus.
Co-authored-by: maria.nunez maria.nunez@mattermost.com

Replace the attribute Combobox marker with a generic initial-focus opt-out

SettingItemMax no longer imports from property_fields. It skips anything
inside an element carrying A11yAttributeNames.SKIP_INITIAL_FOCUS
(data-skip-initial-focus), applying the filter once to the combined form
control and button candidates. AttributeCombobox sets that attribute on
its wrapper, inlines its guards instead of the get*Props() helpers, and
exports clearButtonKeyGuard. options is now required and a lone id is
accepted for multiple.
Co-authored-by: Maria A Nunez maria.nunez@mattermost.com

Unify custom attribute stale-id handling and split Combobox tests

The custom attribute editor renders one AttributeCombobox with a
conditional spread for the multiselect part and passes options ?? [].
A stored single-select id that no longer matches an option now shows
its raw id in both the collapsed row and the editor, as multiselect
already did, instead of showing as unset.
The self-contained custom attribute Combobox tests move to
user_settings_general_attributes.test.tsx, without the K-number
prefixes.
Co-authored-by: Maria A Nunez maria.nunez@mattermost.com

Move attribute Combobox labels into AttributeCombobox and z-index into constants

Drop components/widgets/combobox. The labels live in attribute_combobox.tsx
with property_fields.attribute_combobox.* ids, and the z-index values move
to ZIndex in utils/constants, mirroring the –z-index-* CSS variables.
Co-authored-by: Cursor cursoragent@cursor.com

Remove unused aria-describedby prop from AttributeCombobox

Co-authored-by: Cursor cursoragent@cursor.com

TEMP: revert AttributeCombobox skip-initial-focus marker for test server

Lets SettingItemMax focus the Combobox input when a custom attribute
section expands. Revert this commit to restore the workaround.
Co-authored-by: Cursor cursoragent@cursor.com

Update tests for AttributeCombobox without the skip-initial-focus marker

Without the marker, a section with a value opens with the clear button
(select) or first chip (multiselect) focused; an empty field still opens on
.setting-list. The menu stays closed on expand because the input is never
the initial focus target. Playwright helpers no longer assume
.setting-list focus.
Co-authored-by: Cursor cursoragent@cursor.com

Remove unused SKIP_INITIAL_FOCUS opt-out from SettingItemMax

Nothing sets data-skip-initial-focus any more. SettingItemMax keeps only
the .setting-list fallback for sections with no focusable control.
Co-authored-by: Cursor cursoragent@cursor.com

Focus the Combobox input in SettingItemMax again

Restore input[role=”combobox”] and :not([data-chip]) in SettingItemMax’s
initial-focus selector so Edit focuses the attribute Combobox input, not
its chips or clear button. The .setting-list fallback is no longer needed
and SettingItemMax otherwise matches master.
With compass-ui 0.1.0-alpha.22 the menu opens on that focus; the
attribute tests assert that, and the Playwright helpers and specs only
assert input focus after Edit so they hold once Compass stops opening on
focus.
Co-authored-by: Cursor cursoragent@cursor.com

Mark the AttributeCombobox guard wrapper as presentational

role=’presentation’ replaces the jsx-a11y/no-static-element-interactions
disable on the wrapper that only hosts the key and mousedown guards.
Co-authored-by: Cursor cursoragent@cursor.com

Bump @mattermost/compass-ui to 0.1.0-alpha.24

Co-authored-by: Maria A Nunez maria.nunez@mattermost.com

Update package-lock.json for compass-ui alpha.24

Co-authored-by: Maria A Nunez maria.nunez@mattermost.com

Update tests for Compass Combobox alpha.24 behavior change

The Combobox no longer opens automatically on focus in alpha.24 (handled in compass-design PR #163). Updated tests to expect the menu to be closed after initial focus rather than open.
Co-authored-by: Maria A Nunez maria.nunez@mattermost.com

Fix linting error: remove unused parameter from focusClosedField

Co-authored-by: Maria A Nunez maria.nunez@mattermost.com

Add className, ARIA pass-through and preventEnterSubmit to AttributeCombobox

Co-authored-by: Cursor cursoragent@cursor.com

Use AttributeCombobox for System Console and Bots select and multiselect attributes

Co-authored-by: Cursor cursoragent@cursor.com

Update System Console and Bots E2E for attribute comboboxes

Co-authored-by: Cursor cursoragent@cursor.com

Align Bots attribute combobox names with text field names

Co-authored-by: Cursor cursoragent@cursor.com

Simplify AttributeCombobox props and attribute field rendering

Co-authored-by: Cursor cursoragent@cursor.com

Save the shown first id when a single-select draft is an array

Co-authored-by: Cursor cursoragent@cursor.com

Bump @mattermost/compass-ui to 0.1.0-alpha.26 and drop the Enter submit guard

Combobox now handles Enter while its menu is open, and submitOnEnter={false}
keeps Enter on a closed field from submitting the form, so AttributeCombobox
passes that prop through instead of running its own key handler.
Co-authored-by: Cursor cursoragent@cursor.com

Drop the trailing dots from the multiselect attribute placeholder

Co-authored-by: Cursor cursoragent@cursor.com

Space Bots attribute names from their fields

Co-authored-by: Cursor cursoragent@cursor.com

Render the graph value menu inside its enclosing modal

The popover was portaled to the body, so a focus-enforcing modal such as Profile settings pulled focus back from the search box and fought MUI’s focus trap, leaving the search unusable.
Co-authored-by: Cursor cursoragent@cursor.com

Co-authored-by: Cursor Agent cursoragent@cursor.com
Co-authored-by: mattermost-code matty-code@mattermost.com