fix: when the dropdown is open in a dialog, close only dropdown when …

…overlay is clicked #102
AlaskaAirlines · Dec 19, 2024 · 6d2c44c · 6d2c44c
1 parent de5727c
commit 6d2c44c
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 0 deletions.
diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js
@@ -2347,6 +2347,11 @@ class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = true;
+      }
+
       this.dispatchEventDropdownToggle();
       this.position();
 
@@ -2365,6 +2370,11 @@ class AuroFloatingUI {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
       this.element.triggerChevron?.removeAttribute('data-expanded');
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = false;
+      }
+
       this.dispatchEventDropdownToggle();
     }
   }
@@ -2477,6 +2487,10 @@ class AuroFloatingUI {
 
   configure(elem) {
     this.element = elem;
+    const parentDialog = AuroLibraryRuntimeUtils$1.prototype.closestElement('auro-dialog, [auro-dialog]', elem);
+    if (parentDialog && !parentDialog.modal) {
+      this.element.boundModaless = parentDialog;
+    }
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');

diff --git a/components/combobox/demo/index.min.js b/components/combobox/demo/index.min.js
@@ -2213,6 +2213,11 @@ class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = true;
+      }
+
       this.dispatchEventDropdownToggle();
       this.position();
 
@@ -2231,6 +2236,11 @@ class AuroFloatingUI {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
       this.element.triggerChevron?.removeAttribute('data-expanded');
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = false;
+      }
+
       this.dispatchEventDropdownToggle();
     }
   }
@@ -2343,6 +2353,10 @@ class AuroFloatingUI {
 
   configure(elem) {
     this.element = elem;
+    const parentDialog = AuroLibraryRuntimeUtils$1.prototype.closestElement('auro-dialog, [auro-dialog]', elem);
+    if (parentDialog && !parentDialog.modal) {
+      this.element.boundModaless = parentDialog;
+    }
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');

diff --git a/components/datepicker/demo/api.min.js b/components/datepicker/demo/api.min.js
@@ -12488,6 +12488,11 @@ class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = true;
+      }
+
       this.dispatchEventDropdownToggle();
       this.position();
 
@@ -12506,6 +12511,11 @@ class AuroFloatingUI {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
       this.element.triggerChevron?.removeAttribute('data-expanded');
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = false;
+      }
+
       this.dispatchEventDropdownToggle();
     }
   }
@@ -12618,6 +12628,10 @@ class AuroFloatingUI {
 
   configure(elem) {
     this.element = elem;
+    const parentDialog = AuroLibraryRuntimeUtils$1.prototype.closestElement('auro-dialog, [auro-dialog]', elem);
+    if (parentDialog && !parentDialog.modal) {
+      this.element.boundModaless = parentDialog;
+    }
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');

diff --git a/components/datepicker/demo/index.min.js b/components/datepicker/demo/index.min.js
@@ -12236,6 +12236,11 @@ class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = true;
+      }
+
       this.dispatchEventDropdownToggle();
       this.position();
 
@@ -12254,6 +12259,11 @@ class AuroFloatingUI {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
       this.element.triggerChevron?.removeAttribute('data-expanded');
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = false;
+      }
+
       this.dispatchEventDropdownToggle();
     }
   }
@@ -12366,6 +12376,10 @@ class AuroFloatingUI {
 
   configure(elem) {
     this.element = elem;
+    const parentDialog = AuroLibraryRuntimeUtils$1.prototype.closestElement('auro-dialog, [auro-dialog]', elem);
+    if (parentDialog && !parentDialog.modal) {
+      this.element.boundModaless = parentDialog;
+    }
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');

diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js
@@ -1837,6 +1837,11 @@ class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = true;
+      }
+
       this.dispatchEventDropdownToggle();
       this.position();
 
@@ -1855,6 +1860,11 @@ class AuroFloatingUI {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
       this.element.triggerChevron?.removeAttribute('data-expanded');
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = false;
+      }
+
       this.dispatchEventDropdownToggle();
     }
   }
@@ -1967,6 +1977,10 @@ class AuroFloatingUI {
 
   configure(elem) {
     this.element = elem;
+    const parentDialog = AuroLibraryRuntimeUtils.prototype.closestElement('auro-dialog, [auro-dialog]', elem);
+    if (parentDialog && !parentDialog.modal) {
+      this.element.boundModaless = parentDialog;
+    }
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');

diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js
@@ -1812,6 +1812,11 @@ class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = true;
+      }
+
       this.dispatchEventDropdownToggle();
       this.position();
 
@@ -1830,6 +1835,11 @@ class AuroFloatingUI {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
       this.element.triggerChevron?.removeAttribute('data-expanded');
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = false;
+      }
+
       this.dispatchEventDropdownToggle();
     }
   }
@@ -1942,6 +1952,10 @@ class AuroFloatingUI {
 
   configure(elem) {
     this.element = elem;
+    const parentDialog = AuroLibraryRuntimeUtils.prototype.closestElement('auro-dialog, [auro-dialog]', elem);
+    if (parentDialog && !parentDialog.modal) {
+      this.element.boundModaless = parentDialog;
+    }
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');

diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs
@@ -1,6 +1,7 @@
 /* eslint-disable line-comment-position, no-inline-comments */
 
 import { autoUpdate, computePosition, offset, autoPlacement, flip } from '@floating-ui/dom';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
 export default class AuroFloatingUI {
   constructor() {
@@ -219,6 +220,11 @@ export default class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = true;
+      }
+
       this.dispatchEventDropdownToggle();
       this.position();
 
@@ -237,6 +243,11 @@ export default class AuroFloatingUI {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
       this.element.triggerChevron?.removeAttribute('data-expanded');
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = false;
+      }
+
       this.dispatchEventDropdownToggle();
     }
   }
@@ -350,6 +361,10 @@ export default class AuroFloatingUI {
 
   configure(elem) {
     this.element = elem;
+    const parentDialog = AuroLibraryRuntimeUtils.prototype.closestElement('auro-dialog, [auro-dialog]', elem);
+    if (parentDialog && !parentDialog.modal) {
+      this.element.boundModaless = parentDialog;
+    }
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');

diff --git a/components/select/demo/api.min.js b/components/select/demo/api.min.js
@@ -2280,6 +2280,11 @@ class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = true;
+      }
+
       this.dispatchEventDropdownToggle();
       this.position();
 
@@ -2298,6 +2303,11 @@ class AuroFloatingUI {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
       this.element.triggerChevron?.removeAttribute('data-expanded');
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = false;
+      }
+
       this.dispatchEventDropdownToggle();
     }
   }
@@ -2410,6 +2420,10 @@ class AuroFloatingUI {
 
   configure(elem) {
     this.element = elem;
+    const parentDialog = AuroLibraryRuntimeUtils.prototype.closestElement('auro-dialog, [auro-dialog]', elem);
+    if (parentDialog && !parentDialog.modal) {
+      this.element.boundModaless = parentDialog;
+    }
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');

diff --git a/components/select/demo/index.min.js b/components/select/demo/index.min.js
@@ -2190,6 +2190,11 @@ class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = true;
+      }
+
       this.dispatchEventDropdownToggle();
       this.position();
 
@@ -2208,6 +2213,11 @@ class AuroFloatingUI {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
       this.element.triggerChevron?.removeAttribute('data-expanded');
+
+      if (this.element.boundModaless) {
+        this.element.boundModaless.modal = false;
+      }
+
       this.dispatchEventDropdownToggle();
     }
   }
@@ -2320,6 +2330,10 @@ class AuroFloatingUI {
 
   configure(elem) {
     this.element = elem;
+    const parentDialog = AuroLibraryRuntimeUtils.prototype.closestElement('auro-dialog, [auro-dialog]', elem);
+    if (parentDialog && !parentDialog.modal) {
+      this.element.boundModaless = parentDialog;
+    }
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
     this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');