@lion/overlays - npm Package Compare versions

Comparing version 0.26.0 to 0.26.1

CHANGELOG.md

 # Change Log
 
+## 0.26.1
+
+### Patch Changes
+
+- f2d9b8e2: only focus elements after hide when OverlayController has ownership
+
 ## 0.26.0
@@ -4,0 +10,0 @@

docs/configuration.md

@@ -71,3 +71,3 @@ # Systems >> Overlays >> Configuration ||40
 
-As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
+As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
 
@@ -363,3 +363,3 @@ - Dialogs have a modal option, tooltips don’t
 > This also means that if you use the arrow feature, you are in charge of styling it properly, use the data-popper-placement attribute for this.
-> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/components/interaction/tooltip/overview.md), where an arrow is set by default.
+> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/components/interaction/tooltip/overview.md), where an arrow is set by default.
 
@@ -366,0 +366,0 @@ To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.

docs/features.md

@@ -24,3 +24,3 @@ # Systems >> Overlays >> Features ||20
 
-For a detailed rationale, please consult [Rationale](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/rationale.md).
+For a detailed rationale, please consult [Rationale](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/rationale.md).
 
@@ -71,3 +71,3 @@ ```js preview-story
 
-We also export a few [preset configuration objects](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/configuration.md).
+We also export a few [preset configuration objects](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/configuration.md).
 
@@ -74,0 +74,0 @@ - withModalDialogConfig

docs/overview.md

@@ -9,3 +9,3 @@ # Systems >> Overlays >> Overview ||10
 
-See [lion-dialog](../../../components/interaction/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/components/interaction/tooltip/overview.md) for example Web Component implementations using the Overlay System.
+See [lion-dialog](../../../components/interaction/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/components/interaction/tooltip/overview.md) for example Web Component implementations using the Overlay System.
 
@@ -22,5 +22,5 @@ ## Features
   - Have a `.config` object to set or update the OverlayController's configuration
-- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaysmanager), a global repository keeping track of all different types of overlays
-- [**OverlayController**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaycontroller), a single controller class for handling overlays
-- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
+- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/features.md#overlaysmanager), a global repository keeping track of all different types of overlays
+- [**OverlayController**](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/features.md#overlaycontroller), a single controller class for handling overlays
+- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/features.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
 
@@ -116,3 +116,3 @@ Usually you will use `lion-dialog` (or `lion-tooltip` if this makes more sense).
 
-Please check the [system rationals](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/rationale.md) folder, where we go more in-depth.
+Please check the [system rationals](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/rationale.md) folder, where we go more in-depth.
 
@@ -119,0 +119,0 @@ ### Aria roles

package.json

 {
   "name": "@lion/overlays",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "description": "Overlays System using lit-html for rendering",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -9,3 +9,3 @@ # Systems >> Overlays >> Overview ||10
 
-See [lion-dialog](../../../components/interaction/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/components/interaction/tooltip/overview.md) for example Web Component implementations using the Overlay System.
+See [lion-dialog](../../../components/interaction/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/components/interaction/tooltip/overview.md) for example Web Component implementations using the Overlay System.
 
@@ -22,5 +22,5 @@ ## Features
   - Have a `.config` object to set or update the OverlayController's configuration
-- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaysmanager), a global repository keeping track of all different types of overlays
-- [**OverlayController**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaycontroller), a single controller class for handling overlays
-- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
+- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/features.md#overlaysmanager), a global repository keeping track of all different types of overlays
+- [**OverlayController**](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/features.md#overlaycontroller), a single controller class for handling overlays
+- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/features.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
 
@@ -116,3 +116,3 @@ Usually you will use `lion-dialog` (or `lion-tooltip` if this makes more sense).
 
-Please check the [system rationals](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/rationale.md) folder, where we go more in-depth.
+Please check the [system rationals](https://github.com/ing-bank/lion/blob/956d077d83df970344811c7455f4b8dc65cb10c5/docs/docs/systems/overlays/rationale.md) folder, where we go more in-depth.
 
@@ -119,0 +119,0 @@ ### Aria roles

src/OverlayController.js

@@ -910,11 +910,15 @@ import '@lion/core/differentKeyEventNamesShimIE';
   _restoreFocus() {
+    const { activeElement } = /** @type {* & ShadowRoot} */ (this
+      .__contentWrapperNode).getRootNode();
     // We only are allowed to move focus if we (still) 'own' it.
     // Otherwise we assume the 'outside world' has, purposefully, taken over
-    if (this.elementToFocusAfterHide) {
-      this.elementToFocusAfterHide.focus();
-    } else if (
-      document.activeElement &&
-      this.__contentWrapperNode?.contains(document.activeElement)
+    if (
+      activeElement &&
+      /** @type {HTMLElement} */ (this.__contentWrapperNode).contains(activeElement)
     ) {
-      /** @type {HTMLElement} */ (document.activeElement).blur();
+      if (this.elementToFocusAfterHide) {
+        this.elementToFocusAfterHide.focus();
+      } else {
+        activeElement.blur();
+      }
     }
@@ -921,0 +925,0 @@ }

test/OverlayController.test.js

@@ -744,2 +744,21 @@ /* eslint-disable no-new */
 
+      it(`only sets focus when outside world didn't take over already`, async () => {
+        const input = /** @type {HTMLElement} */ (await fixture('<input />'));
+        const outsideButton = /** @type {HTMLButtonElement} */ (await fixture('<button></button>'));
+        const contentNode = /** @type {HTMLElement} */ (await fixture('<div>/div>'));
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          elementToFocusAfterHide: input,
+          contentNode,
+        });
+
+        await ctrl.show();
+        // an outside element has taken over focus
+        outsideButton.focus();
+        expect(document.activeElement).to.equal(outsideButton);
+
+        await ctrl.hide();
+        expect(document.activeElement).to.equal(outsideButton);
+      });
+
       it('allows to set elementToFocusAfterHide on show', async () => {
@@ -746,0 +765,0 @@ const input = /** @type {HTMLElement} */ (await fixture('<input />'));

No alert changes

Improved metrics

Total package byte prevSize

346186

increased by0.29%

Lines of code

6757

increased by0.3%

No dependency changes