@aurodesignsystem/auro-library 4.1.0-beta.1 → 4.1.0-beta.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Semantic Release Automated Changelog
 
+# [4.1.0-beta.2](https://github.com/AlaskaAirlines/auro-library/compare/v4.1.0-beta.1...v4.1.0-beta.2) (2025-04-01)
+
+
+### Bug Fixes
+
+* hide bib correctly when losing focus on trigger ([226ed07](https://github.com/AlaskaAirlines/auro-library/commit/226ed07a6200d733649f6a9f6e651b88e6ce0d64))
+* prevent clicking background of bib resetting `document.activeElement` ([b8c64d4](https://github.com/AlaskaAirlines/auro-library/commit/b8c64d494e42917c7aabbbc64addf3d7076c62c6))
+
 # [4.1.0-beta.1](https://github.com/AlaskaAirlines/auro-library/compare/v4.0.0...v4.1.0-beta.1) (2025-03-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "4.1.0-beta.1",
+  "version": "4.1.0-beta.2",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",

package/scripts/runtime/floatingUI.mjs

@@ -235,6 +235,14 @@ export default class AuroFloatingUI {
     }
   }
 
+  /**
+   * @private
+   * getting called on 'blur' in trigger or `focusin` in document
+   *  
+   * Hides the bib if focus moves outside of the trigger or bib, unless a 'noHideOnThisFocusLoss' flag is set.
+   * This method checks if the currently active element is still within the trigger or bib.
+   * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
+   */
   handleFocusLoss() {
     if (this.element.noHideOnThisFocusLoss ||
       this.element.hasAttribute('noHideOnThisFocusLoss')) {
@@ -242,9 +250,12 @@ export default class AuroFloatingUI {
     }
 
     const { activeElement } = document;
-    if (activeElement === document.querySelector('body') ||
-      this.element.contains(activeElement) ||
-      this.element.bib?.contains(activeElement)) {
+    // if focus is still inside of trigger or bib, do not close
+    if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
+      return;
+    }
+    // if fullscreen bib is still open and the focus is missing, do not close
+    if (this.element.bib.hasAttribute('isfullscreen') && activeElement === document.body) {
       return;
     }
 
@@ -252,6 +263,12 @@ export default class AuroFloatingUI {
   }
 
   setupHideHandlers() {
+    this.preventFocusLoseOnBibClick = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
+
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
@@ -300,6 +317,12 @@ export default class AuroFloatingUI {
 
   cleanupHideHandlers() {
     // Remove event listeners if they exist
+
+    if (this.preventFocusLoseOnBibClick) {
+      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
+      delete this.preventFocusLoseOnBibClick;
+    }
+
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -438,7 +461,8 @@ export default class AuroFloatingUI {
           }
           break;
         case 'blur':
-          this.handleFocusLoss();
+          // send this task to end of the queue to wait a frame in case focus moves within the floating element/bib
+          setTimeout(() => this.handleFocusLoss());
           break;
         case 'click':
           if (document.activeElement === document.body) {