fix: focus the slider on mousedown (#63)

web-padawan · Aug 7, 2021 · 602962c · 602962c · lpellegr · Aug 9, 2021
1 parent 651dbc2
commit 602962c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/src/lib/components/slider.ts b/src/lib/components/slider.ts
@@ -109,6 +109,7 @@ export abstract class Slider {
         event.preventDefault();
         // event.button is 0 in mousedown for left button activation
         if (!isValid(event) || (!hasTouched && (event as MouseEvent).button != 0)) return;
+        this.el.focus();
         pointerMove(this, event);
         this.dragging = true;
         break;

diff --git a/src/test/color-picker.test.ts b/src/test/color-picker.test.ts
@@ -234,6 +234,13 @@ describe('hex-color-picker', () => {
     });
 
     describe('interaction', () => {
+      it('should focus the slider on mousedown', () => {
+        const spy = sinon.spy(hue, 'focus');
+        const { x, y } = middleOfNode(hue);
+        hue.dispatchEvent(new FakeMouseEvent('mousedown', { pageX: x + 10, pageY: y }));
+        expect(spy.callCount).to.equal(1);
+      });
+
       it('should dispatch color-changed event on mousedown', () => {
         const spy = sinon.spy();
         picker.addEventListener('color-changed', spy);