Repository navigation
fix(material/select): prevent option selection while disabled - #34056
Open
Xapollon430 wants to merge 1 commit into
Open
Xapollon430 wants to merge 1 commit into
Xapollon430 wants to merge 1 commit into
Conversation
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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-selectand noticed a bug where:disabledtotruewhile its panel is open.selectionChangefires.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 hasaria-disabled="false"andpointer-events: auto, even though its parent Select reportsaria-disabled="true".A prop update can send
disabled=truewhile 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
selectin 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
pnpm exec bazel test //src/material/select:unit_tests --test_output=errors: Chromium and Firefox targets pass with the fix.selectionChangebefore the fix. No page errors.MatOption._selectViaInteraction()still checks only the option's own disabled state.