Filter fixes (#11664)

src/components/ha-button-related-filter-menu.ts

@@ -4,6 +4,7 @@ import { mdiFilterVariant } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { computeDeviceName } from "../data/device_registry";
 import { findRelated, RelatedResult } from "../data/search";
@@ -65,6 +66,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
         .fullwidth=${this.narrow}
         .corner=${this.corner}
         @closed=${this._onClosed}
+        @input=${stopPropagation}
       >
         <ha-area-picker
           .label=${this.hass.localize(
@@ -75,6 +77,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           no-add
           .excludeDomains=${this.excludeDomains}
           @value-changed=${this._areaPicked}
+          @click=${this._preventDefault}
         ></ha-area-picker>
         <ha-device-picker
           .label=${this.hass.localize(
@@ -84,6 +87,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           .value=${this.value?.device}
           .excludeDomains=${this.excludeDomains}
           @value-changed=${this._devicePicked}
+          @click=${this._preventDefault}
         ></ha-device-picker>
         <ha-entity-picker
           .label=${this.hass.localize(
@@ -93,6 +97,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           .value=${this.value?.entity}
           .excludeDomains=${this.excludeDomains}
           @value-changed=${this._entityPicked}
+          @click=${this._preventDefault}
         ></ha-entity-picker>
       </mwc-menu-surface>
     `;
@@ -110,7 +115,12 @@ export class HaRelatedFilterButtonMenu extends LitElement {
     this._open = false;
   }
 
+  private _preventDefault(ev) {
+    ev.preventDefault();
+  }
+
   private async _entityPicked(ev: CustomEvent) {
+    ev.stopPropagation();
     const entityId = ev.detail.value;
     if (!entityId) {
       fireEvent(this, "related-changed", { value: undefined });
@@ -130,6 +140,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
   }
 
   private async _devicePicked(ev: CustomEvent) {
+    ev.stopPropagation();
     const deviceId = ev.detail.value;
     if (!deviceId) {
       fireEvent(this, "related-changed", { value: undefined });
@@ -153,6 +164,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
   }
 
   private async _areaPicked(ev: CustomEvent) {
+    ev.stopPropagation();
     const areaId = ev.detail.value;
     if (!areaId) {
       fireEvent(this, "related-changed", { value: undefined });
@@ -176,7 +188,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
       :host {
         display: inline-block;
         position: relative;
-        --mdc-menu-min-width: 200px;
+        --mdc-menu-min-width: 250px;
       }
       ha-area-picker,
       ha-device-picker,
@@ -186,6 +198,12 @@ export class HaRelatedFilterButtonMenu extends LitElement {
         padding: 4px 16px;
         box-sizing: border-box;
       }
+      ha-area-picker {
+        padding-top: 16px;
+      }
+      ha-entity-picker {
+        padding-bottom: 16px;
+      }
       :host([narrow]) ha-area-picker,
       :host([narrow]) ha-device-picker,
       :host([narrow]) ha-entity-picker {

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import Fuse from "fuse.js";
 import {
@@ -5,8 +6,8 @@ import {
   CSSResultGroup,
   html,
   LitElement,
-  TemplateResult,
   PropertyValues,
+  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
@@ -102,8 +103,7 @@ class StepFlowPickHandler extends LitElement {
         .label=${this.hass.localize("ui.panel.config.integrations.search")}
         @keypress=${this._maybeSubmit}
       ></search-input>
-      <div
-        class="container"
+      <mwc-list
         style=${styleMap({
           width: `${this._width}px`,
           height: `${this._height}px`,
@@ -112,7 +112,7 @@ class StepFlowPickHandler extends LitElement {
         ${addDeviceRows.length
           ? html`
               ${addDeviceRows.map((handler) => this._renderRow(handler))}
-              <div class="divider"></div>
+              <li divider padded class="divider" role="separator"></li>
             `
           : ""}
         ${handlers.length
@@ -139,7 +139,7 @@ class StepFlowPickHandler extends LitElement {
                 >.
               </p>
             `}
-      </div>
+      </mwc-list>
     `;
   }
 
@@ -169,10 +169,26 @@ class StepFlowPickHandler extends LitElement {
   }
 
   public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
     if (this._filter === undefined && this.initialFilter !== undefined) {
       this._filter = this.initialFilter;
     }
-    super.willUpdate(changedProps);
+    if (this.initialFilter !== undefined && this._filter === "") {
+      this.initialFilter = undefined;
+      this._filter = "";
+      this._width = undefined;
+      this._height = undefined;
+    } else if (
+      this.hasUpdated &&
+      changedProps.has("_filter") &&
+      (!this._width || !this._height)
+    ) {
+      // Store the width and height so that when we search, box doesn't jump
+      const boundingRect =
+        this.shadowRoot!.querySelector("mwc-list")!.getBoundingClientRect();
+      this._width = boundingRect.width;
+      this._height = boundingRect.height;
+    }
   }
 
   protected firstUpdated(changedProps) {
@@ -183,21 +199,6 @@ class StepFlowPickHandler extends LitElement {
     );
   }
 
-  protected updated(changedProps) {
-    super.updated(changedProps);
-    if (!changedProps.has("handlers")) {
-      return;
-    }
-    // Wait until list item initialized
-    const firstListItem = this.shadowRoot!.querySelector("mwc-list-item")!;
-    firstListItem.updateComplete.then(() => {
-      // Store the width and height so that when we search, box doesn't jump
-      const div = this.shadowRoot!.querySelector("div.container")!;
-      this._width = div.clientWidth;
-      this._height = div.clientHeight;
-    });
-  }
-
   private _getHandlers() {
     return this._filterHandlers(
       this.handlers,
@@ -263,31 +264,26 @@ class StepFlowPickHandler extends LitElement {
         }
         search-input {
           display: block;
-          margin-top: 8px;
-        }
-        .divider {
-          margin: 8px 0;
-          border-top: 1px solid var(--divider-color);
+          margin: 16px 16px 0;
         }
         ha-icon-next {
           margin-right: 8px;
         }
-        div {
+        mwc-list {
           overflow: auto;
           max-height: 600px;
         }
+        .divider {
+          border-bottom-color: var(--divider-color);
+        }
         h2 {
           padding-right: 66px;
         }
         @media all and (max-height: 900px) {
-          div {
+          mwc-list {
             max-height: calc(100vh - 134px);
           }
         }
-        paper-icon-item {
-          cursor: pointer;
-          margin-bottom: 4px;
-        }
         p {
           text-align: center;
           padding: 16px;

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -338,7 +338,9 @@ export class MoreInfoDialog extends LitElement {
           flex-shrink: 0;
           display: block;
         }
-
+        .content {
+          outline: none;
+        }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-header-bar {
             --mdc-theme-primary: var(--app-header-background-color);

src/layouts/hass-tabs-subpage-data-table.ts

@@ -164,7 +164,11 @@ export class HaTabsSubpageDataTable extends LitElement {
       this.hass.localize("ui.components.data-table.search")}
     >
       ${!this.narrow
-        ? html`<div class="filters" slot="suffix">
+        ? html`<div
+            class="filters"
+            slot="suffix"
+            @click=${this._preventDefault}
+          >
             ${filterInfo
               ? html`<div class="active-filters">
                   ${filterInfo}
@@ -194,10 +198,10 @@ export class HaTabsSubpageDataTable extends LitElement {
         <div slot="toolbar-icon">
           ${this.narrow
             ? html`<div class="filter-menu">
-                <slot name="filter-menu"></slot>${this.numHidden ||
-                this.activeFilters
+                ${this.numHidden || this.activeFilters
                   ? html`<span class="badge">${this.numHidden || "!"}</span>`
                   : ""}
+                <slot name="filter-menu"></slot>
               </div>`
             : ""}<slot name="toolbar-icon"></slot>
         </div>
@@ -238,6 +242,10 @@ export class HaTabsSubpageDataTable extends LitElement {
     `;
   }
 
+  private _preventDefault(ev) {
+    ev.preventDefault();
+  }
+
   private _handleSearchChange(ev: CustomEvent) {
     if (this.filter === ev.detail.value) {
       return;
@@ -292,12 +300,14 @@ export class HaTabsSubpageDataTable extends LitElement {
         --mdc-ripple-color: transparant;
       }
       .filters {
-        --mdc-text-field-fill-color: initial;
-        --mdc-text-field-idle-line-color: initial;
+        --mdc-text-field-fill-color: var(--input-fill-color);
+        --mdc-text-field-idle-line-color: var(--input-idle-line-color);
+        --mdc-shape-small: 4px;
         --text-field-overflow: initial;
         display: flex;
         justify-content: flex-end;
         margin-right: 8px;
+        color: var(--primary-text-color);
       }
       .active-filters {
         color: var(--primary-text-color);
@@ -308,6 +318,7 @@ export class HaTabsSubpageDataTable extends LitElement {
         margin-left: 4px;
         font-size: 14px;
         width: max-content;
+        cursor: initial;
       }
       .active-filters ha-svg-icon {
         color: var(--primary-color);

src/panels/config/integrations/ha-config-integrations.ts

@@ -300,10 +300,14 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     const filterMenu = html`<div
       slot=${ifDefined(this.narrow ? "toolbar-icon" : "suffix")}
     >
+      ${!this._showDisabled && this.narrow && disabledCount
+        ? html`<span class="badge">${disabledCount}</span>`
+        : ""}
       <ha-button-menu
         corner="BOTTOM_START"
         multi
         @action=${this._handleMenuAction}
+        @click=${this._preventDefault}
       >
         <ha-icon-button
           slot="trigger"
@@ -322,9 +326,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           )}
         </ha-check-list-item>
       </ha-button-menu>
-      ${!this._showDisabled && this.narrow && disabledCount
-        ? html`<span class="badge">${disabledCount}</span>`
-        : ""}
     </div>`;
 
     return html`
@@ -362,7 +363,11 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                   )}
                 >
                   ${!this._showDisabled && disabledCount
-                    ? html`<div class="active-filters" slot="suffix">
+                    ? html`<div
+                        class="active-filters"
+                        slot="suffix"
+                        @click=${this._preventDefault}
+                      >
                         ${this.hass.localize(
                           "ui.panel.config.integrations.disable.disabled_integrations",
                           { number: disabledCount }
@@ -507,6 +512,10 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     `;
   }
 
+  private _preventDefault(ev) {
+    ev.preventDefault();
+  }
+
   private _loadConfigEntries() {
     getConfigEntries(this.hass).then((configEntries) => {
       this._configEntries = configEntries
@@ -724,6 +733,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           padding: 2px 2px 2px 8px;
           font-size: 14px;
           width: max-content;
+          cursor: initial;
         }
         .active-filters mwc-button {
           margin-left: 8px;
@@ -754,6 +764,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           top: 8px;
           font-size: 0.65em;
         }
+        ha-button-menu {
+          color: var(--primary-text-color);
+        }
       `,
     ];
   }