From 6d2c44ceca6eb26b3f14fad76a682c986a05d239 Mon Sep 17 00:00:00 2001
From: Eunsun Mota <eunsun.mota@alaskaair.com>
Date: Thu, 19 Dec 2024 13:27:12 -0500
Subject: [PATCH] fix: when the dropdown is open in a dialog, close only
 dropdown when overlay is clicked #102

---
 components/combobox/demo/api.min.js     | 14 ++++++++++++++
 components/combobox/demo/index.min.js   | 14 ++++++++++++++
 components/datepicker/demo/api.min.js   | 14 ++++++++++++++
 components/datepicker/demo/index.min.js | 14 ++++++++++++++
 components/dropdown/demo/api.min.js     | 14 ++++++++++++++
 components/dropdown/demo/index.min.js   | 14 ++++++++++++++
 components/dropdown/src/floatingUI.mjs  | 15 +++++++++++++++
 components/select/demo/api.min.js       | 14 ++++++++++++++
 components/select/demo/index.min.js     | 14 ++++++++++++++
 9 files changed, 127 insertions(+)

diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js
index b46dcbcd..a94fcdc3 100644
--- 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
index 012cb254..510a1ba5 100644
--- 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
index 0a892e59..273f0029 100644
--- 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
index 5df788c1..1927e9b3 100644
--- 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
index 8b99539b..f3b87fd5 100644
--- 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
index 0b297742..eee73aaf 100644
--- 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
index 0d98578b..104956fe 100644
--- 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
index 58790595..e66bb5c4 100644
--- 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
index 18da5ea5..28b2f5ca 100644
--- 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');