From 96b83f7eb6ead1de2b30f1483478a2e5d6195349 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 6 Jun 2023 14:45:21 -0400 Subject: [PATCH] fix(color-slider,color-wheel): fix focused state #3278 --- packages/color-slider/src/ColorSlider.ts | 8 ++++---- packages/color-slider/test/color-slider.test.ts | 16 ++++++++++++++-- packages/color-wheel/src/ColorWheel.ts | 8 ++++---- packages/color-wheel/test/color-wheel.test.ts | 16 ++++++++++++++-- 4 files changed, 36 insertions(+), 12 deletions(-) diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts index 7955f342fd..2fdad8414d 100644 --- a/packages/color-slider/src/ColorSlider.ts +++ b/packages/color-slider/src/ColorSlider.ts @@ -189,11 +189,11 @@ export class ColorSlider extends Focusable { this.input.focus(); } - private handleFocusin(): void { + private handleFocus(): void { this.focused = true; } - private handleFocusout(): void { + private handleBlur(): void { if (this._pointerDown) { return; } @@ -344,7 +344,7 @@ export class ColorSlider extends Focusable { protected override firstUpdated(changed: PropertyValues): void { super.firstUpdated(changed); this.boundingClientRect = this.getBoundingClientRect(); - this.addEventListener('focusin', this.handleFocusin); - this.addEventListener('focusout', this.handleFocusout); + this.addEventListener('focus', this.handleFocus); + this.addEventListener('blur', this.handleBlur); } } diff --git a/packages/color-slider/test/color-slider.test.ts b/packages/color-slider/test/color-slider.test.ts index 3b493b4589..06144f985b 100644 --- a/packages/color-slider/test/color-slider.test.ts +++ b/packages/color-slider/test/color-slider.test.ts @@ -119,12 +119,24 @@ describe('ColorSlider', () => { await elementUpdated(el); - el.dispatchEvent(new FocusEvent('focusin')); + expect(el.focused).to.be.false; + + await sendKeys({ press: 'Tab' }); + await elementUpdated(el); + + expect(el.focused).to.be.true; + + el.blur(); + await elementUpdated(el); + + expect(el.focused).to.be.false; + + el.dispatchEvent(new FocusEvent('focus')); await elementUpdated(el); expect(el.focused).to.be.true; - el.dispatchEvent(new FocusEvent('focusout')); + el.dispatchEvent(new FocusEvent('blur')); await elementUpdated(el); expect(el.focused).to.be.false; diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts index 0652407328..7c2733b6ca 100644 --- a/packages/color-wheel/src/ColorWheel.ts +++ b/packages/color-wheel/src/ColorWheel.ts @@ -180,11 +180,11 @@ export class ColorWheel extends Focusable { this.input.focus(); } - private handleFocusin(): void { + private handleFocus(): void { this.focused = true; } - private handleFocusout(): void { + private handleBlur(): void { if (this._pointerDown) { return; } @@ -384,8 +384,8 @@ export class ColorWheel extends Focusable { protected override firstUpdated(changed: PropertyValues): void { super.firstUpdated(changed); this.boundingClientRect = this.getBoundingClientRect(); - this.addEventListener('focusin', this.handleFocusin); - this.addEventListener('focusout', this.handleFocusout); + this.addEventListener('focus', this.handleFocus); + this.addEventListener('blur', this.handleBlur); } private observer?: WithSWCResizeObserver['ResizeObserver']; diff --git a/packages/color-wheel/test/color-wheel.test.ts b/packages/color-wheel/test/color-wheel.test.ts index eecc5eabd5..5a8d1fe31e 100644 --- a/packages/color-wheel/test/color-wheel.test.ts +++ b/packages/color-wheel/test/color-wheel.test.ts @@ -121,12 +121,24 @@ describe('ColorWheel', () => { await elementUpdated(el); - el.dispatchEvent(new FocusEvent('focusin')); + expect(el.focused).to.be.false; + + await sendKeys({ press: 'Tab' }); + await elementUpdated(el); + + expect(el.focused).to.be.true; + + el.blur(); + await elementUpdated(el); + + expect(el.focused).to.be.false; + + el.dispatchEvent(new FocusEvent('focus')); await elementUpdated(el); expect(el.focused).to.be.true; - el.dispatchEvent(new FocusEvent('focusout')); + el.dispatchEvent(new FocusEvent('blur')); await elementUpdated(el); expect(el.focused).to.be.false;