Skip to content

fix(material/select): prevent option selection while disabled - #34056

Open
Xapollon430 wants to merge 1 commit into
angular:mainfrom
Xapollon430:codex/select-disabled-while-open-styled-repro
Open

Xapollon430 wants to merge 1 commit into
angular:mainfrom
Xapollon430:codex/select-disabled-while-open-styled-repro

Conversation

@Xapollon430

Copy link
Copy Markdown

Follow-up to #34044 with the corrected, fully styled reproduction. The earlier recording was missing structural styles; the video below uses the official theme and shows the parent Select becoming disabled before the option is clicked.

Problem

I was playing around with mat-select and noticed a bug where:

  1. Open an enabled Select.
  2. Set disabled to true while its panel is open.
  3. Click an option. The selected value changes and selectionChange fires.

Here is a reproduction video of the issue, recorded before the fix:

angular-material-styled-repro.mp4

This uses published Angular Material 21.2.14, the official Azure Blue prebuilt theme, and a standard mat-form-field. Click "Disable in 3 seconds", open the Select, and wait for the field to turn gray before clicking Orange. The readout shows that the parent is disabled before the selection. There are no forced clicks or custom select, option, or overlay styles.

The original recording was missing styles, which made the issue unclear. I agree that an individually disabled option already has pointer-events: none. This is a different state: the parent Select becomes disabled after opening, while its options are still enabled. In the corrected reproduction, an option has aria-disabled="false" and pointer-events: auto, even though its parent Select reports aria-disabled="true".

A prop update can send disabled=true while someone is choosing an option, for example when an asynchronous request completes or a timer fires. I ran into this sequence while varying component props with Hegel and exercising UI actions with Bombadil in Anta, then reproduced the Angular Material behavior independently with Playwright.

My first thought was to close the panel, since that is what I observed with a native HTML select in Chromium. The HTML option-picking algorithm also stops without selecting an option when the select is disabled.

This PR takes the smaller step of rejecting user selection when the parent Select is disabled. It preserves the current panel behavior and still allows programmatic value changes. Closing the panel when disabled is a reasonable choice too, and I'm happy to adjust the PR to follow Angular Material's preferred pattern. The behavior I'm trying to guarantee is simply that a disabled Select stops accepting user selections.

Validation

  • The regression fails on the original source in Chromium and Firefox.
  • pnpm exec bazel test //src/material/select:unit_tests --test_output=errors: Chromium and Firefox targets pass with the fix.
  • Rechecked the styled browser reproduction: the enabled field turns gray, the parent reports disabled, and a normal click on Orange still changes the value and emits one selectionChange before the fix. No page errors.
  • Current upstream MatOption._selectViaInteraction() still checks only the option's own disabled state.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant