Skip to content

fix(labs): split button clicks on the menu icon and touch targets - #6112

Open
MahmoodKhalil57 wants to merge 1 commit into
material-components:mainfrom
MahmoodKhalil57:fix/gb-split-button-targets
Open

MahmoodKhalil57 wants to merge 1 commit into
material-components:mainfrom
MahmoodKhalil57:fix/gb-split-button-targets

Conversation

@MahmoodKhalil57

Copy link
Copy Markdown

This fixes two bugs in md-gb-split-button.

  1. The leading slot's 48dp touch target is an absolutely positioned ::before. The slot has display: contents, so the touch target sizes itself against the viewport. It covers the page around the split button and takes clicks meant for nearby content.
  2. The menu icon is the trailing slot's ::after, and it paints over the slotted button. Clicking the chevron does nothing.

The container now positions the touch targets, and the icon lets pointer events through to the button. A click on a slot's touch target outside the slotted button now activates that button.

The change is in labs/gb/components/splitbutton/split-button-element.ts. Upstream has no split button tests yet. I have behavior tests for both bugs on my branch and can add them in a test file if you want one.

The leading slot's 48dp touch target is an absolutely positioned ::before.
The slot has display: contents, so the touch target sized itself against the
viewport. It covered the page around the split button and took clicks meant
for nearby content.

The menu icon is the trailing slot's ::after, and it painted over the slotted
button, so clicking the chevron did nothing.

The container now positions the touch targets, and the icon lets pointer
events through. A click on a slot's touch target outside the slotted button
now activates that button.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant