Cleanup

src/components/ha-bottom-sheet.ts

@@ -61,7 +61,33 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
 
   private _escapePressed = false;
 
-  private _handleShow = async () => {
+  private _openDropdowns = new Set<HTMLElement>();
+
+  private _isDropdownInteractionActive() {
+    for (const dropdown of this._openDropdowns) {
+      if (!dropdown.isConnected) {
+        this._openDropdowns.delete(dropdown);
+      }
+    }
+
+    return this._openDropdowns.size > 0;
+  }
+
+  private _isDrawerEvent(ev: Event): ev is CustomEvent<{ source: Element }> {
+    return ev.target === this._drawer;
+  }
+
+  private _handleShow = async (ev: Event) => {
+    const dropdown = this._findDropdownInPath(ev.composedPath());
+    if (dropdown) {
+      this._openDropdowns.add(dropdown);
+      return;
+    }
+
+    if (!this._isDrawerEvent(ev)) {
+      return;
+    }
+
     this._drawerOpen = true;
     this.open = true;
     fireEvent(this, "opened");
@@ -90,7 +116,10 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
     });
   };
 
-  private _handleAfterShow = () => {
+  private _handleAfterShow = (ev: Event) => {
+    if (!this._isDrawerEvent(ev)) {
+      return;
+    }
     fireEvent(this, "after-show");
   };
 
@@ -102,34 +131,83 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
     this._sliderInteractionActive = false;
   };
 
-  private _handleAfterHide = () => {
+  private _handleAfterHide = (ev: Event) => {
+    const dropdown = this._findDropdownInPath(ev.composedPath());
+    if (dropdown) {
+      this._openDropdowns.delete(dropdown);
+      return;
+    }
+
+    if (!this._isDrawerEvent(ev)) {
+      return;
+    }
+
     if (this._sliderInteractionActive) {
       this._drawerOpen = true;
       this.open = true;
       return;
     }
+
+    this._openDropdowns.clear();
     this.open = false;
     this._drawerOpen = false;
     fireEvent(this, "closed");
   };
 
-  private _handleHide = (ev: CustomEvent<{ source: Element }>) => {
+  private _handleHide = (ev: Event) => {
+    const dropdown = this._findDropdownInPath(ev.composedPath());
+    if (dropdown) {
+      return;
+    }
+
+    if (!this._isDrawerEvent(ev)) {
+      return;
+    }
+
     if (this._sliderInteractionActive) {
       ev.preventDefault();
       this._drawerOpen = true;
       this.open = true;
       return;
     }
+    const isScrimOrEscapeDismiss =
+      ev.detail.source === (ev.target as WaDrawer).drawer;
+
+    if (
+      this.open &&
+      isScrimOrEscapeDismiss &&
+      this._isDropdownInteractionActive()
+    ) {
+      ev.preventDefault();
+      this._drawerOpen = true;
+      this.open = true;
+      return;
+    }
+
     if (
       this.preventScrimClose &&
       this._escapePressed &&
-      ev.detail.source === (ev.target as WaDrawer).drawer
+      isScrimOrEscapeDismiss
     ) {
       ev.preventDefault();
     }
     this._escapePressed = false;
+
+    if (!ev.defaultPrevented) {
+      this.open = false;
+      this._drawerOpen = false;
+    }
   };
 
+  private _findDropdownInPath(path: EventTarget[]): HTMLElement | null {
+    for (const target of path) {
+      if (target instanceof HTMLElement && target.localName === "ha-dropdown") {
+        return target;
+      }
+    }
+    return null;
+  }
+
   private _handleKeyDown = (ev: KeyboardEvent) => {
     if (ev.key === "Escape") {
       this._escapePressed = true;
@@ -345,6 +423,7 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
       }
     );
     this._unregisterResizeHandlers();
+    this._openDropdowns.clear();
     this._isDragging = false;
   }