Skip to content

Commit

Permalink
fix(button-toggle): remove redundant blocking touchstart listener (#4947
Browse files Browse the repository at this point in the history
)

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.
  • Loading branch information
crisbeto authored and andrewseguin committed Jun 8, 2017
1 parent 4b98f21 commit 1e92545
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 5 deletions.
3 changes: 1 addition & 2 deletions src/lib/button-toggle/button-toggle.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,4 @@
<ng-content></ng-content>
</div>
</label>
<!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
<div class="mat-button-toggle-focus-overlay" (touchstart)="$event.preventDefault()"></div>
<div class="mat-button-toggle-focus-overlay"></div>
6 changes: 3 additions & 3 deletions src/lib/button-toggle/button-toggle.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ $mat-button-toggle-border-radius: 2px !default;
vertical-align: middle;
}

// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
// element, however we use a proper DOM element in order to be able to disable the default
// touch action. This makes the buttons more responsive on touch devices.
// Overlay to be used as a tint.
.mat-button-toggle-focus-overlay {
border-radius: inherit;

// Disable pointer events to prevent it from hijacking user events.
pointer-events: none;
opacity: 0;
@include mat-fill;
Expand Down

0 comments on commit 1e92545

Please sign in to comment.