@vaadin/overlay 25.3.1 → 25.3.2

package/custom-elements.json

@@ -33,7 +33,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.\n\nAn element inside the overlay that has `autofocus` set, such as\n`<vaadin-text-field autofocus>`, receives focus on open instead,\neven when this property is false.",
               "attribute": "autofocus"
             },
             {
@@ -73,7 +73,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.\n\nAn element inside the overlay that has `autofocus` set, such as\n`<vaadin-text-field autofocus>`, receives focus on open instead,\neven when this property is false.",
               "fieldName": "autofocus"
             },
             {
@@ -135,7 +135,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.\n\nAn element inside the overlay that has `autofocus` set, such as\n`<vaadin-text-field autofocus>`, receives focus on open instead,\neven when this property is false.",
               "attribute": "autofocus",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -321,7 +321,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.\n\nAn element inside the overlay that has `autofocus` set, such as\n`<vaadin-text-field autofocus>`, receives focus on open instead,\neven when this property is false.",
               "fieldName": "autofocus",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -727,7 +727,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.\n\nAn element inside the overlay that has `autofocus` set, such as\n`<vaadin-text-field autofocus>`, receives focus on open instead,\neven when this property is false.",
               "attribute": "autofocus",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -1027,7 +1027,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.\n\nAn element inside the overlay that has `autofocus` set, such as\n`<vaadin-text-field autofocus>`, receives focus on open instead,\neven when this property is false.",
               "fieldName": "autofocus",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.3.1",
+  "version": "25.3.2",
   "publishConfig": {
     "access": "public"
   },
@@ -34,19 +34,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.3.1",
-    "@vaadin/component-base": "~25.3.1",
-    "@vaadin/vaadin-themable-mixin": "~25.3.1",
+    "@vaadin/a11y-base": "~25.3.2",
+    "@vaadin/component-base": "~25.3.2",
+    "@vaadin/vaadin-themable-mixin": "~25.3.2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.3.1",
-    "@vaadin/chai-plugins": "~25.3.1",
-    "@vaadin/test-runner-commands": "~25.3.1",
+    "@vaadin/aura": "~25.3.2",
+    "@vaadin/chai-plugins": "~25.3.2",
+    "@vaadin/test-runner-commands": "~25.3.2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.3.1",
+    "@vaadin/vaadin-lumo-styles": "~25.3.2",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "a652d6071d7ad5add8465772f14f3efe633066a8"
+  "gitHead": "3f75254a3f77da3977cb79a77f549f37b8a5d54e"
 }

package/src/vaadin-overlay-focus-mixin.d.ts

@@ -29,6 +29,10 @@ export declare class OverlayFocusMixinClass {
    * Focus moves to the first tabbable element in the tab order. This
    * can be the overlay itself if it has `tabindex` attribute set to `0`
    * on the host element or the `overlay` shadow DOM part.
+   *
+   * An element inside the overlay that has `autofocus` set, such as
+   * `<vaadin-text-field autofocus>`, receives focus on open instead,
+   * even when this property is false.
    */
   autofocus: boolean;
 

package/src/vaadin-overlay-focus-mixin.js

@@ -39,6 +39,10 @@ export const OverlayFocusMixin = (superClass) =>
          * Focus moves to the first tabbable element in the tab order. This
          * can be the overlay itself if it has `tabindex` attribute set to `0`
          * on the host element or the `overlay` shadow DOM part.
+         *
+         * An element inside the overlay that has `autofocus` set, such as
+         * `<vaadin-text-field autofocus>`, receives focus on open instead,
+         * even when this property is false.
          */
         autofocus: {
           type: Boolean,
@@ -65,11 +69,25 @@ export const OverlayFocusMixin = (superClass) =>
       };
     }
 
+    /**
+     * Whether the overlay moves, traps and restores focus. Override to return
+     * false in overlays that never do: focus properties are then ignored and
+     * the focus controllers are not created.
+     * @protected
+     */
+    static get manageFocus() {
+      return true;
+    }
+
     constructor() {
       super();
 
-      this.__focusTrapController = new FocusTrapController(this);
-      this.__focusRestorationController = new FocusRestorationController();
+      this.__manageFocus = this.constructor.manageFocus;
+
+      if (this.__manageFocus) {
+        this.__focusTrapController = new FocusTrapController(this);
+        this.__focusRestorationController = new FocusRestorationController();
+      }
     }
 
     /**
@@ -85,8 +103,10 @@ export const OverlayFocusMixin = (superClass) =>
     ready() {
       super.ready();
 
-      this.addController(this.__focusTrapController);
-      this.addController(this.__focusRestorationController);
+      if (this.__manageFocus) {
+        this.addController(this.__focusTrapController);
+        this.addController(this.__focusRestorationController);
+      }
     }
 
     /**
@@ -104,6 +124,10 @@ export const OverlayFocusMixin = (superClass) =>
      * @protected
      */
     _resetFocus() {
+      if (!this.__manageFocus) {
+        return;
+      }
+
       if (this.focusTrap) {
         this.__focusTrapController.releaseFocus();
       }
@@ -121,28 +145,32 @@ export const OverlayFocusMixin = (superClass) =>
      * @protected
      */
     _saveFocus() {
+      if (!this.__manageFocus) {
+        return;
+      }
+
       if (this.restoreFocusOnClose) {
         this.__focusRestorationController.saveFocus(this.restoreFocusNode);
       }
     }
 
     /**
-     * Sets up focus after the overlay opening has completed: moves focus into
-     * the overlay if `autofocus` is enabled, and traps focus within the overlay
-     * if `focusTrap` is enabled.
+     * Sets up focus after the overlay opening has completed: moves focus to
+     * the first element with `autofocus` inside the overlay, otherwise to the
+     * first tabbable element if the `autofocus` property is set, and traps
+     * focus if `focusTrap` is set.
      *
      * @protected
      */
     _initFocus() {
-      if (isElementHidden(this._focusRoot)) {
+      if (!this.__manageFocus || isElementHidden(this._focusRoot)) {
         return;
       }
 
-      if (this.autofocus) {
-        const tabbables = getTabbableElements(this._focusRoot);
-        if (!tabbables.some(isElementFocused)) {
-          tabbables[0]?.focus({ focusVisible: isKeyboardActive() });
-        }
+      const tabbables = getTabbableElements(this._focusRoot);
+      if (!tabbables.some(isElementFocused)) {
+        const target = tabbables.find((el) => this.#hasAutofocus(el)) ?? (this.autofocus ? tabbables[0] : null);
+        target?.focus({ focusVisible: isKeyboardActive() });
       }
 
       if (this.focusTrap) {
@@ -186,4 +214,27 @@ export const OverlayFocusMixin = (superClass) =>
       }
       return n === this._contentRoot;
     }
+
+    /**
+     * Returns true if the element has `autofocus`, or belongs to a custom
+     * element that has it (e.g. the input of `<vaadin-text-field autofocus>`).
+     * As with native `autofocus`, a plain `<div autofocus>` does not apply to
+     * its children. Stops at the focus root, whose `autofocus` refers to the overlay.
+     * Walks the flat tree, the same way tabbables are collected from the focus root,
+     * so it never leaves the overlay when content is slotted from the owner.
+     *
+     * @param {HTMLElement} element
+     * @return {boolean}
+     */
+    #hasAutofocus(element) {
+      const focusRoot = this._focusRoot;
+      let node = element;
+      while (node && node !== focusRoot && node !== this) {
+        if (node.autofocus && (node === element || customElements.get(node.localName))) {
+          return true;
+        }
+        node = node.assignedSlot || node.parentNode || node.host;
+      }
+      return false;
+    }
   };