Skip to content

Commit 4bae885

Browse files
authored
fix(material/slider): fix internal focus state on safari (#28243)
* fix(material/slider): fix internal focus state on safari * Fixes #28211 * fixup! fix(material/slider): fix internal focus state on safari
1 parent a643a2e commit 4bae885

File tree

3 files changed

+20
-1
lines changed

3 files changed

+20
-1
lines changed

src/material/slider/slider-input.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -476,6 +476,9 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
476476
_onPointerUp(): void {
477477
if (this._isActive) {
478478
this._isActive = false;
479+
if (this._platform.SAFARI) {
480+
this._setIsFocused(false);
481+
}
479482
this.dragEnd.emit({source: this, parent: this._slider, value: this.value});
480483

481484
// This setTimeout is to prevent the pointerup from triggering a value

src/material/slider/slider-thumb.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
OnDestroy,
1919
ViewChild,
2020
ViewEncapsulation,
21+
inject,
2122
} from '@angular/core';
2223
import {MatRipple, RippleAnimationConfig, RippleRef, RippleState} from '@angular/material/core';
2324
import {
@@ -28,6 +29,7 @@ import {
2829
MAT_SLIDER,
2930
MAT_SLIDER_VISUAL_THUMB,
3031
} from './slider-interface';
32+
import {Platform} from '@angular/cdk/platform';
3133

3234
/**
3335
* The visual slider thumb.
@@ -96,6 +98,8 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni
9698
/** The host native HTML input element. */
9799
_hostElement: HTMLElement;
98100

101+
private _platform = inject(Platform);
102+
99103
constructor(
100104
readonly _cdr: ChangeDetectorRef,
101105
private readonly _ngZone: NgZone,
@@ -189,6 +193,12 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni
189193
if (!this._sliderInput._isFocused) {
190194
this._hideRipple(this._focusRippleRef);
191195
}
196+
197+
// On Safari we need to immediately re-show the hover ripple because
198+
// sliders do not retain focus from pointer events on that platform.
199+
if (this._platform.SAFARI) {
200+
this._showHoverRipple();
201+
}
192202
};
193203

194204
/** Handles displaying the hover ripple. */

src/material/slider/slider.spec.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -627,7 +627,13 @@ describe('MDC-based MatSlider', () => {
627627
pointerdown();
628628
pointerup();
629629
flush();
630-
expect(isRippleVisible('focus')).toBeTrue();
630+
631+
// The slider immediately loses focus on pointerup for Safari.
632+
if (platform.SAFARI) {
633+
expect(isRippleVisible('hover')).toBeTrue();
634+
} else {
635+
expect(isRippleVisible('focus')).toBeTrue();
636+
}
631637
}));
632638

633639
it('should hide the focus ripple on blur', fakeAsync(() => {

0 commit comments

Comments
 (0)