fix: blur active element on step buttons touchend (#7512)

vaadin · Jul 5, 2024 · dc75665 · dc75665
1 parent a2cd307
commit dc75665
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 0 deletions.
diff --git a/packages/number-field/src/vaadin-number-field-mixin.js b/packages/number-field/src/vaadin-number-field-mixin.js
@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
@@ -194,6 +195,7 @@ export const NumberFieldMixin = (superClass) =>
       // it means scrolling is in progress, therefore we shouldn't update field value.
       if (e.cancelable) {
         e.preventDefault();
+        this.__blurActiveElement();
         this._decreaseValue();
       }
     }
@@ -204,10 +206,22 @@ export const NumberFieldMixin = (superClass) =>
       // it means scrolling is in progress, therefore we shouldn't update field value.
       if (e.cancelable) {
         e.preventDefault();
+        this.__blurActiveElement();
         this._increaseValue();
       }
     }
 
+    /** @private */
+    __blurActiveElement() {
+      // If another element is focused, blur it on step button touch to hide
+      // the mobile keyboard that might still be open for the other element.
+      // See https://github.com/vaadin/web-components/issues/7494
+      const activeElement = getDeepActiveElement();
+      if (activeElement && activeElement !== this.inputElement) {
+        activeElement.blur();
+      }
+    }
+
     /** @protected */
     _onDecreaseButtonClick() {
       this._decreaseValue();

diff --git a/packages/number-field/test/value-control-buttons.common.js b/packages/number-field/test/value-control-buttons.common.js
@@ -656,3 +656,77 @@ describe('value control buttons', () => {
     });
   });
 });
+
+describe('multiple fields', () => {
+  let container, fields;
+
+  beforeEach(async () => {
+    container = fixtureSync(`
+      <div>
+        <vaadin-number-field step-buttons-visible></vaadin-number-field>
+        <vaadin-number-field step-buttons-visible></vaadin-number-field>
+      </div>
+    `);
+    await nextRender();
+    fields = [...container.children];
+  });
+
+  ['increase', 'decrease'].forEach((type) => {
+    describe(`${type} button`, () => {
+      let button;
+
+      beforeEach(() => {
+        button = fields[1].shadowRoot.querySelector(`[part=${type}-button]`);
+      });
+
+      it(`should blur the other field on ${type} button touchend`, () => {
+        const input = fields[0].inputElement;
+        input.focus();
+
+        const spy = sinon.spy(input, 'blur');
+        const e = new CustomEvent('touchend', { cancelable: true });
+        button.dispatchEvent(e);
+
+        expect(spy).to.be.calledOnce;
+      });
+
+      it(`should not blur the other field on ${type} button touchend if not cancelable`, () => {
+        const input = fields[0].inputElement;
+        input.focus();
+
+        const spy = sinon.spy(input, 'blur');
+        const e = new CustomEvent('touchend', { cancelable: false });
+        button.dispatchEvent(e);
+
+        expect(spy).to.be.not.called;
+      });
+
+      it(`should not blur the field on its own ${type} button touchend`, () => {
+        const input = fields[1].inputElement;
+        input.focus();
+
+        const spy = sinon.spy(input, 'blur');
+        const e = new CustomEvent('touchend', { cancelable: true });
+        button.dispatchEvent(e);
+
+        expect(spy).to.be.not.called;
+      });
+
+      it(`should not blur the field on its own ${type} button touchend when in shadow root`, () => {
+        // Move the field into shadow root to verify the deep active element logic
+        const inner = document.createElement('div');
+        inner.attachShadow({ mode: 'open' });
+        container.appendChild(inner);
+        inner.shadowRoot.appendChild(fields[1]);
+
+        const input = fields[1].inputElement;
+        input.focus();
+
+        const e = new CustomEvent('touchend', { cancelable: true });
+        button.dispatchEvent(e);
+
+        expect(inner.shadowRoot.activeElement).to.be.equal(input);
+      });
+    });
+  });
+});