fix issues with display of tags selection dropdown menu

Behike · Jun 8, 2022 · 274ee8d · 274ee8d
1 parent 4179eba
commit 274ee8d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/src/components/scheduler-select.ts b/src/components/scheduler-select.ts
@@ -45,6 +45,16 @@ export class SchedulerSelect extends LitElement {
   @query('vaadin-combo-box-light', true)
   private _comboBox!: HTMLElement;
 
+  private _overlayMutationObserver?: MutationObserver;
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._overlayMutationObserver) {
+      this._overlayMutationObserver.disconnect();
+      this._overlayMutationObserver = undefined;
+    }
+  }
+
   public open() {
     this.updateComplete.then(() => {
       (this.shadowRoot?.querySelector('vaadin-combo-box-light') as any)?.open();
@@ -152,6 +162,42 @@ export class SchedulerSelect extends LitElement {
 
   private _openedChanged(ev: CustomEvent) {
     this._opened = ev.detail.value;
+
+    if (this._opened && 'MutationObserver' in window && !this._overlayMutationObserver) {
+      const overlay = document.querySelector<HTMLElement>('vaadin-combo-box-overlay');
+
+      if (!overlay) return;
+
+      this._overlayMutationObserver = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          if (
+            mutation.type === 'attributes' &&
+            mutation.attributeName === 'inert' &&
+            // @ts-expect-error
+            overlay.inert === true
+          ) {
+            // @ts-expect-error
+            overlay.inert = false;
+            this._overlayMutationObserver?.disconnect();
+            this._overlayMutationObserver = undefined;
+          } else if (mutation.type === 'childList') {
+            mutation.removedNodes.forEach(node => {
+              if (node.nodeName === 'VAADIN-COMBO-BOX-OVERLAY') {
+                this._overlayMutationObserver?.disconnect();
+                this._overlayMutationObserver = undefined;
+              }
+            });
+          }
+        });
+      });
+
+      this._overlayMutationObserver.observe(overlay, {
+        attributes: true,
+      });
+      this._overlayMutationObserver.observe(document.body, {
+        childList: true,
+      });
+    }
   }
 
   private _valueChanged(ev: CustomEvent) {

diff --git a/src/load-ha-form.js b/src/load-ha-form.js
@@ -1,6 +1,6 @@
 
 export const loadHaForm = async () => {
-  if (customElements.get("ha-checkbox") && customElements.get("ha-slider")) return;
+  if (customElements.get("ha-checkbox") && customElements.get("ha-slider") && customElements.get("ha-combo-box")) return;
 
   await customElements.whenDefined("partial-panel-resolver");
   const ppr = document.createElement('partial-panel-resolver');