Skip to content

Commit 1e92545

Browse files
crisbetoandrewseguin
authored andcommitted
fix(button-toggle): remove redundant blocking touchstart listener (#4947)
Removes an unnecessary `touchstart` listener on the button toggle. It was initially added to prevent it from capturing user events, however it's no longer necessary, because we have `pointer-events: none` on the element. This also fixes a warning that is being logged by Chrome. Fixes #4221.
1 parent 4b98f21 commit 1e92545

File tree

2 files changed

+4
-5
lines changed

2 files changed

+4
-5
lines changed

src/lib/button-toggle/button-toggle.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,4 @@
1212
<ng-content></ng-content>
1313
</div>
1414
</label>
15-
<!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
16-
<div class="mat-button-toggle-focus-overlay" (touchstart)="$event.preventDefault()"></div>
15+
<div class="mat-button-toggle-focus-overlay"></div>

src/lib/button-toggle/button-toggle.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ $mat-button-toggle-border-radius: 2px !default;
5555
vertical-align: middle;
5656
}
5757

58-
// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
59-
// element, however we use a proper DOM element in order to be able to disable the default
60-
// touch action. This makes the buttons more responsive on touch devices.
58+
// Overlay to be used as a tint.
6159
.mat-button-toggle-focus-overlay {
6260
border-radius: inherit;
61+
62+
// Disable pointer events to prevent it from hijacking user events.
6363
pointer-events: none;
6464
opacity: 0;
6565
@include mat-fill;

0 commit comments

Comments
 (0)