From 324128c45472d82389e777abbb8b09fe25c57730 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 4 Aug 2019 17:57:36 +0300
Subject: [PATCH] fix(slider): inconsistent cursor behavior if user's pointer
 moves around while dragging

Currently we only change the cursor in the slider if the user's pointer is over the thumb or thumb label. This doesn't work very well while dragging, because the elements aren't very large and the pointer could move off of it temporarily while dragging. These changes make it so the cursor for the entire slider is changed while dragging.

Furthermore, on Safari the cursor goes into text selection mode while dragging. These changes address this issue as well.

Fixes #14613.
---
 src/material/slider/slider.scss    | 12 ++++++------
 src/material/slider/slider.spec.ts |  7 +++++++
 src/material/slider/slider.ts      |  3 +++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
index 7d4f34fd8f34..dd7c2e55af94 100644
--- a/src/material/slider/slider.scss
+++ b/src/material/slider/slider.scss
@@ -35,6 +35,11 @@ $mat-slider-focus-ring-size: 30px !default;
   padding: $mat-slider-padding;
   outline: none;
   vertical-align: middle;
+
+  &:not(.mat-slider-disabled):active,
+  &.mat-slider-sliding:not(.mat-slider-disabled) {
+    @include cursor-grabbing;
+  }
 }
 
 .mat-slider-wrapper {
@@ -102,14 +107,9 @@ $mat-slider-focus-ring-size: 30px !default;
 }
 
 %_mat-slider-cursor {
-  .mat-slider:not(.mat-slider-disabled) & {
+  .mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) & {
     @include cursor-grab;
   }
-
-  .mat-slider:not(.mat-slider-disabled) &:active,
-  .mat-slider-sliding:not(.mat-slider-disabled) & {
-    @include cursor-grabbing;
-  }
 }
 
 .mat-slider-thumb {
diff --git a/src/material/slider/slider.spec.ts b/src/material/slider/slider.spec.ts
index 2fae33c6f2dd..05d65530fcf3 100644
--- a/src/material/slider/slider.spec.ts
+++ b/src/material/slider/slider.spec.ts
@@ -215,6 +215,13 @@ describe('MatSlider', () => {
       expect(sliderInstance.value).toBe(100);
     });
 
+    it('should prevent the default action of the `selectstart` event', () => {
+      const event = dispatchFakeEvent(sliderNativeElement, 'selectstart');
+      fixture.detectChanges();
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
   });
 
   describe('disabled slider', () => {
diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts
index e331837e9df4..c9d98a7a6a3d 100644
--- a/src/material/slider/slider.ts
+++ b/src/material/slider/slider.ts
@@ -120,6 +120,9 @@ const _MatSliderMixinBase:
     '(slide)': '_onSlide($event)',
     '(slideend)': '_onSlideEnd()',
     '(slidestart)': '_onSlideStart($event)',
+    // On Safari starting to slide temporarily triggers text selection mode which
+    // show the wrong cursor. We prevent it by stopping the `selectstart` event.
+    '(selectstart)': '$event.preventDefault()',
     'class': 'mat-slider',
     'role': 'slider',
     '[tabIndex]': 'tabIndex',