Improve search and filters on mobile + fix close button in search field

src/common/search/search-input.ts

@@ -14,6 +14,9 @@ class SearchInput extends LitElement {
 
   @property() public filter?: string;
 
+  @property({ type: Boolean })
+  public suffix = false;
+
   @property({ type: Boolean })
   public autofocus = false;
 
@@ -33,7 +36,7 @@ class SearchInput extends LitElement {
         .label=${this.label || "Search"}
         .value=${this.filter || ""}
         .icon=${true}
-        .iconTrailing=${this.filter}
+        .iconTrailing=${this.filter || this.suffix}
         @input=${this._filterInputChanged}
       >
         <slot name="prefix" slot="leadingIcon">
@@ -43,16 +46,18 @@ class SearchInput extends LitElement {
             .path=${mdiMagnify}
           ></ha-svg-icon>
         </slot>
-        ${this.filter &&
-        html`
-          <ha-icon-button
-            slot="trailingIcon"
-            @click=${this._clearSearch}
-            .label=${this.hass.localize("ui.common.clear")}
-            .path=${mdiClose}
-            class="clear-button"
-          ></ha-icon-button>
-        `}
+        <div class="trailing" slot="trailingIcon">
+          ${this.filter &&
+          html`
+            <ha-icon-button
+              @click=${this._clearSearch}
+              .label=${this.hass.localize("ui.common.clear")}
+              .path=${mdiClose}
+              class="clear-button"
+            ></ha-icon-button>
+          `}
+          <slot name="suffix"></slot>
+        </div>
       </ha-textfield>
     `;
   }
@@ -81,15 +86,16 @@ class SearchInput extends LitElement {
       ha-svg-icon {
         outline: none;
       }
-      ha-icon-button {
-        --mdc-icon-button-size: 24px;
-      }
       .clear-button {
         --mdc-icon-size: 20px;
       }
       ha-textfield {
         display: inherit;
       }
+      .trailing {
+        display: flex;
+        align-items: center;
+      }
     `;
   }
 }

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

@@ -73,6 +73,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           .hass=${this.hass}
           .value=${this.value?.area}
           no-add
+          .excludeDomains=${this.excludeDomains}
           @value-changed=${this._areaPicked}
         ></ha-area-picker>
         <ha-device-picker
@@ -81,6 +82,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           )}
           .hass=${this.hass}
           .value=${this.value?.device}
+          .excludeDomains=${this.excludeDomains}
           @value-changed=${this._devicePicked}
         ></ha-device-picker>
         <ha-entity-picker
@@ -103,7 +105,8 @@ export class HaRelatedFilterButtonMenu extends LitElement {
     this._open = true;
   }
 
-  private _onClosed(): void {
+  private _onClosed(ev): void {
+    ev.stopPropagation();
     this._open = false;
   }
 
@@ -173,9 +176,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
       :host {
         display: inline-block;
         position: relative;
-      }
-      :host([narrow]) {
-        position: static;
+        --mdc-menu-min-width: 200px;
       }
       ha-area-picker,
       ha-device-picker,
@@ -186,7 +187,8 @@ export class HaRelatedFilterButtonMenu extends LitElement {
         box-sizing: border-box;
       }
       :host([narrow]) ha-area-picker,
-      :host([narrow]) ha-device-picker {
+      :host([narrow]) ha-device-picker,
+      :host([narrow]) ha-entity-picker {
         width: 100%;
       }
     `;

src/components/ha-textfield.ts

@@ -68,6 +68,14 @@ export class HaTextField extends TextFieldBase {
       :host([no-spinner]) input[type="number"] {
         -moz-appearance: textfield;
       }
+
+      .mdc-text-field__ripple {
+        overflow: hidden;
+      }
+
+      .mdc-text-field {
+        overflow: var(--text-field-overflow);
+      }
     `,
   ];
 }

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import { mdiFilterVariant } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
@@ -157,30 +156,27 @@ export class HaTabsSubpageDataTable extends LitElement {
       : hiddenLabel;
 
     const headerToolbar = html`<search-input
-        .hass=${this.hass}
-        .filter=${this.filter}
-        @value-changed=${this._handleSearchChange}
-        .label=${this.searchLabel ||
-        this.hass.localize("ui.components.data-table.search")}
-      >
-      </search-input>
-      <div class="filters">
-        ${filterInfo
-          ? html`<div class="active-filters">
-              ${this.narrow
-                ? html`<div>
-                    <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
-                    <paper-tooltip animation-delay="0" position="left">
-                      ${filterInfo}
-                    </paper-tooltip>
-                  </div>`
-                : filterInfo}
-              <mwc-button @click=${this._clearFilter}>
-                ${this.hass.localize("ui.components.data-table.clear")}
-              </mwc-button>
-            </div>`
-          : ""}<slot name="filter-menu"></slot>
-      </div>`;
+      .hass=${this.hass}
+      .filter=${this.filter}
+      .suffix=${!this.narrow}
+      @value-changed=${this._handleSearchChange}
+      .label=${this.searchLabel ||
+      this.hass.localize("ui.components.data-table.search")}
+    >
+      ${!this.narrow
+        ? html`<div class="filters" slot="suffix">
+            ${filterInfo
+              ? html`<div class="active-filters">
+                  ${filterInfo}
+                  <mwc-button @click=${this._clearFilter}>
+                    ${this.hass.localize("ui.components.data-table.clear")}
+                  </mwc-button>
+                </div>`
+              : ""}
+            <slot name="filter-menu"></slot>
+          </div>`
+        : ""}
+    </search-input>`;
 
     return html`
       <hass-tabs-subpage
@@ -195,7 +191,16 @@ export class HaTabsSubpageDataTable extends LitElement {
         .mainPage=${this.mainPage}
         .supervisor=${this.supervisor}
       >
-        <div slot="toolbar-icon"><slot name="toolbar-icon"></slot></div>
+        <div slot="toolbar-icon">
+          ${this.narrow
+            ? html`<div class="filter-menu">
+                <slot name="filter-menu"></slot>${this.numHidden ||
+                this.activeFilters
+                  ? html`<span class="badge">${this.numHidden || "!"}</span>`
+                  : ""}
+              </div>`
+            : ""}<slot name="toolbar-icon"></slot>
+        </div>
         ${this.narrow
           ? html`
               <div slot="header">
@@ -267,6 +272,12 @@ export class HaTabsSubpageDataTable extends LitElement {
         align-items: center;
         color: var(--secondary-text-color);
       }
+      search-input {
+        --mdc-text-field-fill-color: var(--sidebar-background-color);
+        --mdc-text-field-idle-line-color: var(--divider-color);
+        --text-field-overflow: visible;
+        z-index: 5;
+      }
       .table-header search-input {
         display: block;
         position: absolute;
@@ -276,15 +287,16 @@ export class HaTabsSubpageDataTable extends LitElement {
       }
       .search-toolbar search-input {
         display: block;
+        width: 100%;
         color: var(--secondary-text-color);
-        --mdc-text-field-fill-color: transparant;
-        --mdc-text-field-idle-line-color: var(--divider-color);
         --mdc-ripple-color: transparant;
       }
       .filters {
+        --mdc-text-field-fill-color: initial;
+        --mdc-text-field-idle-line-color: initial;
+        --text-field-overflow: initial;
         display: flex;
         justify-content: flex-end;
-        width: 100%;
         margin-right: 8px;
       }
       .active-filters {
@@ -295,6 +307,7 @@ export class HaTabsSubpageDataTable extends LitElement {
         padding: 2px 2px 2px 8px;
         margin-left: 4px;
         font-size: 14px;
+        width: max-content;
       }
       .active-filters ha-svg-icon {
         color: var(--primary-color);
@@ -313,6 +326,24 @@ export class HaTabsSubpageDataTable extends LitElement {
         left: 0;
         content: "";
       }
+      .badge {
+        min-width: 20px;
+        box-sizing: border-box;
+        border-radius: 50%;
+        font-weight: 400;
+        background-color: var(--primary-color);
+        line-height: 20px;
+        text-align: center;
+        padding: 0px 4px;
+        color: var(--text-primary-color);
+        position: absolute;
+        right: 0;
+        top: 4px;
+        font-size: 0.65em;
+      }
+      .filter-menu {
+        position: relative;
+      }
     `;
   }
 }

src/layouts/hass-tabs-subpage.ts

@@ -272,6 +272,7 @@ class HassTabsSubpage extends LitElement {
       ha-menu-button,
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {
+        display: flex;
         flex-shrink: 0;
         pointer-events: auto;
         color: var(--sidebar-icon-color);