refactor: update select to use overlay focus restoration logic (#7601) (

#7605)
vaadin · Jul 31, 2024 · 0f345ce · 0f345ce
1 parent df8acb8
commit 0f345ce
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/packages/select/src/vaadin-lit-select-overlay.js b/packages/select/src/vaadin-lit-select-overlay.js
@@ -57,6 +57,13 @@ class SelectOverlay extends PositionMixin(OverlayMixin(ThemableMixin(DirMixin(Po
     `;
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.restoreFocusOnClose = true;
+  }
+
   /** @protected */
   updated(props) {
     super.updated(props);

diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js
@@ -367,7 +367,6 @@ export const SelectBaseMixin = (superClass) =>
           this.removeAttribute('focus-ring');
         }
       } else if (wasOpened) {
-        this.focus();
         if (this._openedWithFocusRing) {
           this.setAttribute('focus-ring', '');
         }

diff --git a/packages/select/src/vaadin-select-overlay.js b/packages/select/src/vaadin-select-overlay.js
@@ -59,6 +59,8 @@ export class SelectOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableM
   ready() {
     super.ready();
 
+    this.restoreFocusOnClose = true;
+
     // When setting `opened` as an attribute, the overlay is already teleported to body
     // by the time when `ready()` callback of the `vaadin-select` is executed by Polymer,
     // so querySelector() would return null. So we use this workaround to set properties.

diff --git a/packages/select/test/keyboard.common.js b/packages/select/test/keyboard.common.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextRender, nextUpdate, outsideClick } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 
@@ -67,7 +67,7 @@ describe('keyboard', () => {
       });
     });
 
-    it('should focus value button element on overlay closing', async () => {
+    it('should focus value button element on overlay closing with Esc', async () => {
       await sendKeys({ press: 'Tab' });
 
       await sendKeys({ press: 'Enter' });
@@ -81,6 +81,21 @@ describe('keyboard', () => {
       expect(focusedSpy.calledOnce).to.be.true;
     });
 
+    it('should focus value button element on overlay closing with outside click', async () => {
+      await sendKeys({ press: 'Tab' });
+
+      await sendKeys({ press: 'Enter' });
+      await nextRender();
+
+      const focusedSpy = sinon.spy(valueButton, 'focus');
+
+      outsideClick();
+      await nextUpdate(select);
+      await aTimeout(0);
+
+      expect(focusedSpy.calledOnce).to.be.true;
+    });
+
     it('should restore focus-ring attribute on overlay closing', async () => {
       await sendKeys({ press: 'Tab' });