Skip to content

fix(material/list): pointer events disabled around content#26012

Merged
crisbeto merged 1 commit intoangular:mainfrom
crisbeto:26010/list-pointer-events
Nov 18, 2022
Merged

fix(material/list): pointer events disabled around content#26012
crisbeto merged 1 commit intoangular:mainfrom
crisbeto:26010/list-pointer-events

Conversation

@crisbeto
Copy link
Member

MDC applies pointer-events: none around different sections of the list item which breaks interactivity. As evidenced by the dev app demos, we support interactive content in them so these changes reset the pointer-events back to auto.

Fixes #26010.

MDC applies `pointer-events: none` around different sections of the list item which breaks interactivity. As evidenced by the dev app demos, we support interactive content in them so these changes reset the `pointer-events` back to `auto`.

Fixes angular#26010.
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Nov 18, 2022
Copy link
Member

@devversion devversion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

// even though we allowed interactive content in them.
.mdc-list-item__start,
.mdc-list-item__end,
.mdc-list-item__content {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just double checking: Should content allow for pointer-events:none? I don't fully recall without looking, but might be needed for anchor elements and disabling?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MDC's code doesn't have any comments on why the pointer-events: none is there. I don't think that it's there for anchor list items that are disabled, because it's only a wrapper around the projected content. My best guess is that it's used as a shorthand to switch the cursor to the default and disable text selection.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Nov 18, 2022
@crisbeto crisbeto merged commit 370ab74 into angular:main Nov 18, 2022
crisbeto added a commit that referenced this pull request Nov 18, 2022
MDC applies `pointer-events: none` around different sections of the list item which breaks interactivity. As evidenced by the dev app demos, we support interactive content in them so these changes reset the `pointer-events` back to `auto`.

Fixes #26010.

(cherry picked from commit 370ab74)
@princemaple
Copy link
Contributor

Thanks for the quick fix.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 19, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug(mat-list): .mdc-list-item__content makes the buttons in list item not clickable

3 participants