Allow clearing values in optional selects (#9442)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-form/ha-form-select.ts

@@ -1,14 +1,19 @@
+import "@material/mwc-icon-button/mwc-icon-button";
+import { mdiClose, mdiMenuDown } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-menu-button/paper-menu-button";
+import "@polymer/paper-ripple/paper-ripple";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-paper-dropdown-menu";
+import "../ha-svg-icon";
 import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./ha-form";
 
 @customElement("ha-form-select")
 export class HaFormSelect extends LitElement implements HaFormElement {
-  @property() public schema!: HaFormSelectSchema;
+  @property({ attribute: false }) public schema!: HaFormSelectSchema;
 
   @property() public data!: HaFormSelectData;
 
@@ -26,7 +31,33 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-paper-dropdown-menu .label=${this.label}>
+      <paper-menu-button horizontal-align="right" vertical-offset="8">
+        <div class="dropdown-trigger" slot="dropdown-trigger">
+          <paper-ripple></paper-ripple>
+          <paper-input
+            id="input"
+            type="text"
+            readonly
+            value=${this.data}
+            label=${this.label}
+            input-role="button"
+            input-aria-haspopup="listbox"
+            autocomplete="off"
+          >
+            ${this.data && this.schema.optional
+              ? html`<mwc-icon-button
+                  slot="suffix"
+                  class="clear-button"
+                  @click=${this._clearValue}
+                >
+                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                </mwc-icon-button>`
+              : ""}
+            <mwc-icon-button slot="suffix">
+              <ha-svg-icon .path=${mdiMenuDown}></ha-svg-icon>
+            </mwc-icon-button>
+          </paper-input>
+        </div>
         <paper-listbox
           slot="dropdown-content"
           attr-for-selected="item-value"
@@ -45,7 +76,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
             )
           }
         </paper-listbox>
-      </ha-paper-dropdown-menu>
+      </paper-menu-button>
     `;
   }
 
@@ -57,6 +88,11 @@ export class HaFormSelect extends LitElement implements HaFormElement {
     return Array.isArray(item) ? item[1] || item[0] : item;
   }
 
+  private _clearValue(ev: CustomEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", { value: undefined });
+  }
+
   private _valueChanged(ev: CustomEvent) {
     if (!ev.detail.value) {
       return;
@@ -68,8 +104,16 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-paper-dropdown-menu {
+      paper-menu-button {
         display: block;
+        padding: 0;
+      }
+      paper-input > mwc-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 2px;
+      }
+      .clear-button {
+        color: var(--secondary-text-color);
       }
     `;
   }