fix(color-slider,color-wheel): fix focused state #3278

adobe · Jun 22, 2023 · 96b83f7 · 96b83f7
1 parent 0121fd6
commit 96b83f7
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;