From 46a03b9b6152071adf1218837df6a557397b430b Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Tue, 22 Mar 2022 15:56:19 -0500
Subject: [PATCH 01/10] List Selector

---
 gallery/src/pages/components/ha-selector.ts   |   6 +
 src/components/ha-chip.ts                     |  10 +-
 .../ha-selector/ha-selector-select.ts         | 137 +++++++++++++-----
 3 files changed, 114 insertions(+), 39 deletions(-)

diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index f4a5500d933b..3a32fc09cc88 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -203,6 +203,12 @@ const SCHEMAS: {
       entity: { name: "Entity", selector: { entity: { multiple: true } } },
       device: { name: "Device", selector: { device: { multiple: true } } },
       area: { name: "Area", selector: { area: { multiple: true } } },
+      select: {
+        name: "Select Multiple",
+        selector: {
+          select: { multiple: true, options: ["Option 1", "Option 2"] },
+        },
+      },
     },
   },
 ];
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index 2a41ffc760ba..960d96ee2749 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -14,6 +14,8 @@ import { customElement, property } from "lit/decorators";
 export class HaChip extends LitElement {
   @property({ type: Boolean }) public hasIcon = false;
 
+  @property({ type: Boolean }) public hasTrailingIcon = false;
+
   @property({ type: Boolean }) public noText = false;
 
   protected render(): TemplateResult {
@@ -30,6 +32,11 @@ export class HaChip extends LitElement {
             <span class="mdc-chip__text"><slot></slot></span>
           </span>
         </span>
+        ${this.hasTrailingIcon
+          ? html`<div class="mdc-chip__icon mdc-chip__icon--trailing">
+              <slot name="trailing-icon"></slot>
+            </div>`
+          : null}
       </div>
     `;
   }
@@ -53,7 +60,8 @@ export class HaChip extends LitElement {
         color: var(--ha-chip-text-color, var(--primary-text-color));
       }
 
-      .mdc-chip__icon--leading {
+      .mdc-chip__icon--leading,
+      .mdc-chip__icon--trailing {
         --mdc-icon-size: 20px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index 053bed4d6ff3..305248deee18 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -1,11 +1,16 @@
 import "@material/mwc-formfield/mwc-formfield";
 import "@material/mwc-list/mwc-list-item";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { mdiClose } from "@mdi/js";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import type { SelectOption, SelectSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
+import "../ha-chip";
+import "../ha-chip-set";
+import "../ha-combo-box";
 import "../ha-radio";
 import "../ha-select";
 
@@ -15,7 +20,7 @@ export class HaSelectSelector extends LitElement {
 
   @property({ attribute: false }) public selector!: SelectSelector;
 
-  @property() public value?: string;
+  @property() public value?: string | string[];
 
   @property() public label?: string;
 
@@ -26,48 +31,81 @@ export class HaSelectSelector extends LitElement {
   @property({ type: Boolean }) public required = true;
 
   protected render() {
-    if (this.required && this.selector.select.options!.length < 6) {
+    const options = this.selector.select.options.map((option) =>
+      typeof option === "object" ? option : { value: option, label: option }
+    );
+
+    if (this.required && options!.length < 6) {
       return html`
         <div>
           ${this.label}
-          ${this.selector.select.options.map((item: string | SelectOption) => {
-            const value = typeof item === "object" ? item.value : item;
-            const label = typeof item === "object" ? item.label : item;
-
-            return html`
-              <mwc-formfield .label=${label}>
+          ${options.map(
+            (item: SelectOption) => html`
+              <mwc-formfield .label=${item.label}>
                 <ha-radio
                   .checked=${value === this.value}
-                  .value=${value}
+                  .value=${item.value}
                   .disabled=${this.disabled}
                   @change=${this._valueChanged}
                 ></ha-radio>
               </mwc-formfield>
-            `;
-          })}
+            `
+          )}
         </div>
       `;
     }
 
+    if (!this.selector.select.multiple) {
+      return html`
+        <ha-select
+          fixedMenuPosition
+          naturalMenuWidth
+          .label=${this.label}
+          .value=${this.value}
+          .helper=${this.helper}
+          .disabled=${this.disabled}
+          @closed=${stopPropagation}
+          @selected=${this._valueChanged}
+        >
+          ${options.map(
+            (item: SelectOption) => html`
+              <mwc-list-item .value=${item.value}>${item.label}</mwc-list-item>
+            `
+          )}
+        </ha-select>
+      `;
+    }
+
+    const value =
+      !this.value || this.value === "" ? [] : (this.value as string[]);
+
     return html`
-      <ha-select
-        fixedMenuPosition
-        naturalMenuWidth
+      <ha-chip-set>
+        ${value?.map(
+          (item, idx) =>
+            html`
+              <ha-chip hasTrailingIcon>
+                ${options.find((option) => option.value === item)?.label ||
+                item}
+                <ha-svg-icon
+                  slot="trailing-icon"
+                  .path=${mdiClose}
+                  .idx=${idx}
+                  @click=${this._removeItem}
+                ></ha-svg-icon>
+              </ha-chip>
+            `
+        )}
+      </ha-chip-set>
+      <ha-combo-box
+        allowCustomValue=${ifDefined(this.selector.select.custom_value)}
+        item-value-path="value"
+        item-label-path="label"
+        .hass=${this.hass}
         .label=${this.label}
-        .value=${this.value}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        @closed=${stopPropagation}
-        @selected=${this._valueChanged}
-      >
-        ${this.selector.select.options.map((item: string | SelectOption) => {
-          const value = typeof item === "object" ? item.value : item;
-          const label = typeof item === "object" ? item.label : item;
-
-          return html`<mwc-list-item .value=${value}>${label}</mwc-list-item>`;
-        })}
-      </ha-select>
+        .filteredItems=${options}
+        @value-changed=${this._comboBoxValueChanged}
+      ></ha-combo-box>
     `;
   }
 
@@ -81,16 +119,39 @@ export class HaSelectSelector extends LitElement {
     });
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
-      ha-select {
-        width: 100%;
-      }
-      mwc-formfield {
-        display: block;
-      }
-    `;
+  private _removeItem(ev): void {
+    (this.value as string[])!.splice(ev.target.idx, 1);
+
+    fireEvent(this, "value-changed", {
+      value: this.value,
+    });
+    this.requestUpdate();
+  }
+
+  private _comboBoxValueChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const newValue = ev.detail.value;
+
+    if (this.disabled || newValue === "") {
+      return;
+    }
+
+    const currentValue =
+      !this.value || this.value === "" ? [] : (this.value as string[]);
+
+    fireEvent(this, "value-changed", {
+      value: [...currentValue, newValue],
+    });
   }
+
+  static styles = css`
+    ha-select {
+      width: 100%;
+    }
+    mwc-formfield {
+      display: block;
+    }
+  `;
 }
 
 declare global {

From 021f391596db132b9fa2e198b27049a22f34d216 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Tue, 22 Mar 2022 16:25:17 -0500
Subject: [PATCH 02/10] Fix merge

---
 .../ha-selector/ha-selector-select.ts         | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index 305248deee18..9580cf3cdcb5 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -35,6 +35,40 @@ export class HaSelectSelector extends LitElement {
       typeof option === "object" ? option : { value: option, label: option }
     );
 
+    if (this.selector.select.multiple) {
+      const value =
+        !this.value || this.value === "" ? [] : (this.value as string[]);
+
+      return html`
+        <ha-chip-set>
+          ${value?.map(
+            (item, idx) =>
+              html`
+                <ha-chip hasTrailingIcon>
+                  ${options.find((option) => option.value === item)?.label ||
+                  item}
+                  <ha-svg-icon
+                    slot="trailing-icon"
+                    .path=${mdiClose}
+                    .idx=${idx}
+                    @click=${this._removeItem}
+                  ></ha-svg-icon>
+                </ha-chip>
+              `
+          )}
+        </ha-chip-set>
+        <ha-combo-box
+          allowCustomValue=${ifDefined(this.selector.select.custom_value)}
+          item-value-path="value"
+          item-label-path="label"
+          .hass=${this.hass}
+          .label=${this.label}
+          .filteredItems=${options}
+          @value-changed=${this._comboBoxValueChanged}
+        ></ha-combo-box>
+      `;
+    }
+
     if (this.required && options!.length < 6) {
       return html`
         <div>
@@ -43,7 +77,7 @@ export class HaSelectSelector extends LitElement {
             (item: SelectOption) => html`
               <mwc-formfield .label=${item.label}>
                 <ha-radio
-                  .checked=${value === this.value}
+                  .checked=${item.value === this.value}
                   .value=${item.value}
                   .disabled=${this.disabled}
                   @change=${this._valueChanged}
@@ -55,57 +89,23 @@ export class HaSelectSelector extends LitElement {
       `;
     }
 
-    if (!this.selector.select.multiple) {
-      return html`
-        <ha-select
-          fixedMenuPosition
-          naturalMenuWidth
-          .label=${this.label}
-          .value=${this.value}
-          .helper=${this.helper}
-          .disabled=${this.disabled}
-          @closed=${stopPropagation}
-          @selected=${this._valueChanged}
-        >
-          ${options.map(
-            (item: SelectOption) => html`
-              <mwc-list-item .value=${item.value}>${item.label}</mwc-list-item>
-            `
-          )}
-        </ha-select>
-      `;
-    }
-
-    const value =
-      !this.value || this.value === "" ? [] : (this.value as string[]);
-
     return html`
-      <ha-chip-set>
-        ${value?.map(
-          (item, idx) =>
-            html`
-              <ha-chip hasTrailingIcon>
-                ${options.find((option) => option.value === item)?.label ||
-                item}
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${mdiClose}
-                  .idx=${idx}
-                  @click=${this._removeItem}
-                ></ha-svg-icon>
-              </ha-chip>
-            `
-        )}
-      </ha-chip-set>
-      <ha-combo-box
-        allowCustomValue=${ifDefined(this.selector.select.custom_value)}
-        item-value-path="value"
-        item-label-path="label"
-        .hass=${this.hass}
+      <ha-select
+        fixedMenuPosition
+        naturalMenuWidth
         .label=${this.label}
-        .filteredItems=${options}
-        @value-changed=${this._comboBoxValueChanged}
-      ></ha-combo-box>
+        .value=${this.value}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        @closed=${stopPropagation}
+        @selected=${this._valueChanged}
+      >
+        ${options.map(
+          (item: SelectOption) => html`
+            <mwc-list-item .value=${item.value}>${item.label}</mwc-list-item>
+          `
+        )}
+      </ha-select>
     `;
   }
 

From ab2b0f20b6aab91864a4ad8f0864b4734c7bdcba Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Thu, 24 Mar 2022 08:29:26 -0500
Subject: [PATCH 03/10] Choose value from list

---
 gallery/src/pages/components/ha-selector.ts   |  6 +++-
 .../ha-selector/ha-selector-select.ts         | 35 ++++++++++++++++---
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index 3a32fc09cc88..f0dc04be8442 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -206,7 +206,11 @@ const SCHEMAS: {
       select: {
         name: "Select Multiple",
         selector: {
-          select: { multiple: true, options: ["Option 1", "Option 2"] },
+          select: {
+            multiple: true,
+            custom_value: true,
+            options: ["Option 1", "Option 2"],
+          },
         },
       },
     },
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index 9580cf3cdcb5..745f7d2081e7 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -2,15 +2,14 @@ import "@material/mwc-formfield/mwc-formfield";
 import "@material/mwc-list/mwc-list-item";
 import { mdiClose } from "@mdi/js";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import type { SelectOption, SelectSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../ha-chip";
 import "../ha-chip-set";
-import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
 import "../ha-radio";
 import "../ha-select";
 
@@ -30,6 +29,10 @@ export class HaSelectSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @query("ha-combo-box", true) private comboBox!: HaComboBox;
+
+  private _filter = "";
+
   protected render() {
     const options = this.selector.select.options.map((option) =>
       typeof option === "object" ? option : { value: option, label: option }
@@ -58,12 +61,14 @@ export class HaSelectSelector extends LitElement {
           )}
         </ha-chip-set>
         <ha-combo-box
-          allowCustomValue=${ifDefined(this.selector.select.custom_value)}
           item-value-path="value"
           item-label-path="label"
           .hass=${this.hass}
           .label=${this.label}
-          .filteredItems=${options}
+          .disabled=${this.disabled}
+          .value=${this._filter}
+          .items=${options}
+          @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
         ></ha-combo-box>
       `;
@@ -136,6 +141,11 @@ export class HaSelectSelector extends LitElement {
       return;
     }
 
+    // Trying to reset the value... Not working currently
+    this._filter = "";
+    this.comboBox.value = "";
+    this.requestUpdate();
+
     const currentValue =
       !this.value || this.value === "" ? [] : (this.value as string[]);
 
@@ -144,6 +154,21 @@ export class HaSelectSelector extends LitElement {
     });
   }
 
+  private _filterChanged(ev: CustomEvent): void {
+    this._filter = ev.detail.value;
+
+    const filteredItems = this.comboBox.items?.filter((item) => {
+      const label = item.label || item.value;
+      return label.toLowerCase().includes(this._filter?.toLowerCase());
+    });
+
+    if (this._filter !== "" && this.selector.select.custom_value) {
+      filteredItems?.unshift({ label: this._filter, value: this._filter });
+    }
+
+    this.comboBox.filteredItems = filteredItems;
+  }
+
   static styles = css`
     ha-select {
       width: 100%;

From 5ae9b118e825ed669d3a8d8dee765266d7513929 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Fri, 25 Mar 2022 08:40:01 -0500
Subject: [PATCH 04/10] Add Checkbox and modes

---
 .../ha-selector/ha-selector-select.ts         | 71 +++++++++++++------
 src/data/selector.ts                          |  4 ++
 2 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index 745f7d2081e7..fd5fd77a2d4c 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -7,9 +7,11 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import type { SelectOption, SelectSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
+import "../ha-checkbox";
 import "../ha-chip";
 import "../ha-chip-set";
 import type { HaComboBox } from "../ha-combo-box";
+import "../ha-formfield";
 import "../ha-radio";
 import "../ha-select";
 
@@ -38,6 +40,45 @@ export class HaSelectSelector extends LitElement {
       typeof option === "object" ? option : { value: option, label: option }
     );
 
+    if (!this.selector.select.custom_value && this._mode === "list") {
+      if (this.required) {
+        return html`
+          <div>
+            ${this.label}
+            ${options.map(
+              (item: SelectOption) => html`
+                <mwc-formfield .label=${item.label}>
+                  <ha-radio
+                    .checked=${item.value === this.value}
+                    .value=${item.value}
+                    .disabled=${this.disabled}
+                    @change=${this._valueChanged}
+                  ></ha-radio>
+                </mwc-formfield>
+              `
+            )}
+          </div>
+        `;
+      }
+
+      return html`
+        <div>
+          ${this.label}${options.map(
+            (item: SelectOption) => html`
+              <ha-formfield .label=${item.label}>
+                <ha-checkbox
+                  .checked=${this.value?.includes(item.value)}
+                  .value=${item.value}
+                  .disabled=${this.disabled}
+                  @change=${this._valueChanged}
+                ></ha-checkbox>
+              </ha-formfield>
+            `
+          )}
+        </div>
+      `;
+    }
+
     if (this.selector.select.multiple) {
       const value =
         !this.value || this.value === "" ? [] : (this.value as string[]);
@@ -74,26 +115,6 @@ export class HaSelectSelector extends LitElement {
       `;
     }
 
-    if (this.required && options!.length < 6) {
-      return html`
-        <div>
-          ${this.label}
-          ${options.map(
-            (item: SelectOption) => html`
-              <mwc-formfield .label=${item.label}>
-                <ha-radio
-                  .checked=${item.value === this.value}
-                  .value=${item.value}
-                  .disabled=${this.disabled}
-                  @change=${this._valueChanged}
-                ></ha-radio>
-              </mwc-formfield>
-            `
-          )}
-        </div>
-      `;
-    }
-
     return html`
       <ha-select
         fixedMenuPosition
@@ -114,6 +135,12 @@ export class HaSelectSelector extends LitElement {
     `;
   }
 
+  private get _mode(): "list" | "dropdown" {
+    return this.selector.select.mode || this.selector.select.options.length > 6
+      ? "list"
+      : "dropdown";
+  }
+
   private _valueChanged(ev) {
     ev.stopPropagation();
     if (this.disabled || !ev.target.value) {
@@ -170,9 +197,7 @@ export class HaSelectSelector extends LitElement {
   }
 
   static styles = css`
-    ha-select {
-      width: 100%;
-    }
+    ha-select,
     mwc-formfield {
       display: block;
     }
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 076fa78aa37f..10cda864b721 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -170,6 +170,9 @@ export interface SelectOption {
 
 export interface SelectSelector {
   select: {
+    multiple?: boolean;
+    custom_value?: boolean;
+    mode?: "list" | "dropdown";
     options: string[] | SelectOption[];
   };
 }
@@ -209,6 +212,7 @@ export interface TargetSelector {
     };
   };
 }
+
 export interface ThemeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   theme: {};

From 2589a43ba45b4ccd4e9f24b7bca3b69ab74eddfe Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Tue, 29 Mar 2022 13:13:52 -0500
Subject: [PATCH 05/10] Add new modes and types

---
 gallery/src/pages/components/ha-selector.ts   | 32 +++++++++-
 .../ha-selector/ha-selector-select.ts         | 63 +++++++++++++++++--
 2 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index f0dc04be8442..514b95f73e10 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -109,7 +109,7 @@ const AREAS = [
 
 const SCHEMAS: {
   name: string;
-  input: Record<string, BlueprintInput | null>;
+  input: Record<string, (BlueprintInput & { required?: boolean }) | null>;
 }[] = [
   {
     name: "One of each",
@@ -166,7 +166,19 @@ const SCHEMAS: {
       object: { name: "Object", selector: { object: {} } },
       select_radio: {
         name: "Select (Radio)",
-        selector: { select: { options: ["Option 1", "Option 2"] } },
+        selector: {
+          select: { options: ["Option 1", "Option 2"], mode: "list" },
+        },
+      },
+      select_checkbox: {
+        name: "Select (Checkbox)",
+        required: false,
+        selector: {
+          select: {
+            mode: "list",
+            options: ["Option 1", "Option 2", "Option 3", "Option 4"],
+          },
+        },
       },
       select: {
         name: "Select",
@@ -183,6 +195,22 @@ const SCHEMAS: {
           },
         },
       },
+      select_custom: {
+        name: "Select (Custom)",
+        selector: {
+          select: {
+            custom_value: true,
+            options: [
+              "Option 1",
+              "Option 2",
+              "Option 3",
+              "Option 4",
+              "Option 5",
+              "Option 6",
+            ],
+          },
+        },
+      },
       icon: { name: "Icon", selector: { icon: {} } },
       media: { name: "Media", selector: { media: {} } },
       location: { name: "Location", selector: { location: {} } },
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index fd5fd77a2d4c..7696d52bb797 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -70,7 +70,7 @@ export class HaSelectSelector extends LitElement {
                   .checked=${this.value?.includes(item.value)}
                   .value=${item.value}
                   .disabled=${this.disabled}
-                  @change=${this._valueChanged}
+                  @change=${this._checkboxChanged}
                 ></ha-checkbox>
               </ha-formfield>
             `
@@ -115,6 +115,22 @@ export class HaSelectSelector extends LitElement {
       `;
     }
 
+    if (this.selector.select.custom_value) {
+      return html`
+        <ha-combo-box
+          item-value-path="value"
+          item-label-path="label"
+          .hass=${this.hass}
+          .label=${this.label}
+          .disabled=${this.disabled}
+          .value=${this._filter}
+          .items=${options}
+          @filter-changed=${this._filterChanged}
+          @value-changed=${this._comboBoxValueChanged}
+        ></ha-combo-box>
+      `;
+    }
+
     return html`
       <ha-select
         fixedMenuPosition
@@ -143,11 +159,42 @@ export class HaSelectSelector extends LitElement {
 
   private _valueChanged(ev) {
     ev.stopPropagation();
-    if (this.disabled || !ev.target.value) {
+    const value = ev.detail?.value || ev.target.value;
+    if (this.disabled || !value) {
       return;
     }
     fireEvent(this, "value-changed", {
-      value: ev.target.value,
+      value: value,
+    });
+  }
+
+  private _checkboxChanged(ev) {
+    ev.stopPropagation();
+    if (this.disabled) {
+      return;
+    }
+
+    let newValue: string[];
+    const value: string = ev.target.value;
+    const checked = ev.target.checked;
+
+    if (checked) {
+      if (!this.value) {
+        newValue = [value];
+      } else if (this.value.includes(value)) {
+        return;
+      } else {
+        newValue = [...this.value, value];
+      }
+    } else {
+      if (!this.value?.includes(value)) {
+        return;
+      }
+      newValue = (this.value as string[]).filter((v) => v !== value);
+    }
+
+    fireEvent(this, "value-changed", {
+      value: newValue,
     });
   }
 
@@ -168,6 +215,13 @@ export class HaSelectSelector extends LitElement {
       return;
     }
 
+    if (!this.selector.select.multiple) {
+      fireEvent(this, "value-changed", {
+        value: newValue,
+      });
+      return;
+    }
+
     // Trying to reset the value... Not working currently
     this._filter = "";
     this.comboBox.value = "";
@@ -198,7 +252,8 @@ export class HaSelectSelector extends LitElement {
 
   static styles = css`
     ha-select,
-    mwc-formfield {
+    mwc-formfield,
+    ha-formfield {
       display: block;
     }
   `;

From 23bdf43d5d0dbb7222943ea91bb79f38f7feb4d5 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 30 Mar 2022 08:40:03 -0500
Subject: [PATCH 06/10] start fixing reviews

---
 gallery/src/pages/components/ha-selector.ts   | 30 ++++++++++-------
 src/components/ha-chip.ts                     |  7 +++-
 .../ha-selector/ha-selector-select.ts         | 33 +++++++++++++------
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index 514b95f73e10..15482b68d097 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -170,16 +170,6 @@ const SCHEMAS: {
           select: { options: ["Option 1", "Option 2"], mode: "list" },
         },
       },
-      select_checkbox: {
-        name: "Select (Checkbox)",
-        required: false,
-        selector: {
-          select: {
-            mode: "list",
-            options: ["Option 1", "Option 2", "Option 3", "Option 4"],
-          },
-        },
-      },
       select: {
         name: "Select",
         selector: {
@@ -237,7 +227,25 @@ const SCHEMAS: {
           select: {
             multiple: true,
             custom_value: true,
-            options: ["Option 1", "Option 2"],
+            options: [
+              "Option 1",
+              "Option 2",
+              "Option 3",
+              "Option 4",
+              "Option 5",
+              "Option 6",
+            ],
+          },
+        },
+      },
+      select_checkbox: {
+        name: "Select Multiple (Checkbox)",
+        required: false,
+        selector: {
+          select: {
+            mode: "list",
+            multiple: true,
+            options: ["Option 1", "Option 2", "Option 3", "Option 4"],
           },
         },
       },
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index 960d96ee2749..f22e0e29adec 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -62,13 +62,18 @@ export class HaChip extends LitElement {
 
       .mdc-chip__icon--leading,
       .mdc-chip__icon--trailing {
-        --mdc-icon-size: 20px;
+        --mdc-icon-size: 18px;
+        line-height: 14px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
       .mdc-chip.no-text
         .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
         margin-right: -4px;
       }
+
+      span[role="gridcell"] {
+        line-height: 14px;
+      }
     `;
   }
 }
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index 7696d52bb797..ee9572f254a9 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -41,7 +41,7 @@ export class HaSelectSelector extends LitElement {
     );
 
     if (!this.selector.select.custom_value && this._mode === "list") {
-      if (this.required) {
+      if (!this.selector.select.multiple || this.required) {
         return html`
           <div>
             ${this.label}
@@ -101,6 +101,7 @@ export class HaSelectSelector extends LitElement {
               `
           )}
         </ha-chip-set>
+
         <ha-combo-box
           item-value-path="value"
           item-label-path="label"
@@ -108,7 +109,7 @@ export class HaSelectSelector extends LitElement {
           .label=${this.label}
           .disabled=${this.disabled}
           .value=${this._filter}
-          .items=${options}
+          .items=${options.filter((item) => !this.value?.includes(item.value))}
           @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
         ></ha-combo-box>
@@ -116,6 +117,13 @@ export class HaSelectSelector extends LitElement {
     }
 
     if (this.selector.select.custom_value) {
+      if (
+        this.value !== undefined &&
+        !options.find((option) => option.value === this.value)
+      ) {
+        options.unshift({ value: this.value, label: this.value });
+      }
+
       return html`
         <ha-combo-box
           item-value-path="value"
@@ -123,7 +131,7 @@ export class HaSelectSelector extends LitElement {
           .hass=${this.hass}
           .label=${this.label}
           .disabled=${this.disabled}
-          .value=${this._filter}
+          .value=${this._filter || this.value}
           .items=${options}
           @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
@@ -152,9 +160,10 @@ export class HaSelectSelector extends LitElement {
   }
 
   private get _mode(): "list" | "dropdown" {
-    return this.selector.select.mode || this.selector.select.options.length > 6
-      ? "list"
-      : "dropdown";
+    return (
+      this.selector.select.mode ||
+      (this.selector.select.options.length < 6 ? "list" : "dropdown")
+    );
   }
 
   private _valueChanged(ev) {
@@ -222,10 +231,14 @@ export class HaSelectSelector extends LitElement {
       return;
     }
 
-    // Trying to reset the value... Not working currently
-    this._filter = "";
-    this.comboBox.value = "";
-    this.requestUpdate();
+    if (newValue !== undefined && this.value?.includes(newValue)) {
+      return;
+    }
+
+    // // Trying to reset the value... Not working currently
+    // this._filter = "";
+    // this.comboBox.value = "";
+    // this.requestUpdate();
 
     const currentValue =
       !this.value || this.value === "" ? [] : (this.value as string[]);

From 5a5246b65622f9ec8902ad656d186779879fe519 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 30 Mar 2022 17:04:38 +0200
Subject: [PATCH 07/10] fix

---
 src/components/ha-combo-box.ts                |  2 +-
 .../ha-selector/ha-selector-select.ts         | 22 ++++++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index 7c44541bcc13..c86cb5bf7257 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -116,8 +116,8 @@ export class HaComboBox extends LitElement {
         .itemValuePath=${this.itemValuePath}
         .itemIdPath=${this.itemIdPath}
         .itemLabelPath=${this.itemLabelPath}
-        .value=${this.value || ""}
         .items=${this.items}
+        .value=${this.value || ""}
         .filteredItems=${this.filteredItems}
         .allowCustomValue=${this.allowCustomValue}
         .disabled=${this.disabled}
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index ee9572f254a9..6fcceff2367b 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -131,8 +131,8 @@ export class HaSelectSelector extends LitElement {
           .hass=${this.hass}
           .label=${this.label}
           .disabled=${this.disabled}
-          .value=${this._filter || this.value}
           .items=${options}
+          .value=${this.value}
           @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
         ></ha-combo-box>
@@ -207,13 +207,15 @@ export class HaSelectSelector extends LitElement {
     });
   }
 
-  private _removeItem(ev): void {
+  private async _removeItem(ev) {
     (this.value as string[])!.splice(ev.target.idx, 1);
+    this.value = [...this.value];
 
     fireEvent(this, "value-changed", {
       value: this.value,
     });
-    this.requestUpdate();
+    await this.updateComplete;
+    this._filterChanged();
   }
 
   private _comboBoxValueChanged(ev: CustomEvent): void {
@@ -237,6 +239,11 @@ export class HaSelectSelector extends LitElement {
 
     // // Trying to reset the value... Not working currently
     // this._filter = "";
+    setTimeout(() => {
+      this._filterChanged();
+      this.comboBox._comboBox.inputElement.value = "";
+    }, 0);
+    // this.comboBox._comboBox.inputElement.value = undefined;
     // this.comboBox.value = "";
     // this.requestUpdate();
 
@@ -248,15 +255,18 @@ export class HaSelectSelector extends LitElement {
     });
   }
 
-  private _filterChanged(ev: CustomEvent): void {
-    this._filter = ev.detail.value;
+  private _filterChanged(ev?: CustomEvent): void {
+    this._filter = ev?.detail.value || "";
 
     const filteredItems = this.comboBox.items?.filter((item) => {
+      if (this.selector.select.multiple && this.value?.includes(item.value)) {
+        return false;
+      }
       const label = item.label || item.value;
       return label.toLowerCase().includes(this._filter?.toLowerCase());
     });
 
-    if (this._filter !== "" && this.selector.select.custom_value) {
+    if (this._filter && this.selector.select.custom_value) {
       filteredItems?.unshift({ label: this._filter, value: this._filter });
     }
 

From 462b9016840ae37606abc5001d1e3c386838e4a3 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 30 Mar 2022 17:05:34 +0200
Subject: [PATCH 08/10] Update ha-selector-select.ts

---
 src/components/ha-selector/ha-selector-select.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index 6fcceff2367b..cb7553f710ad 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -237,15 +237,10 @@ export class HaSelectSelector extends LitElement {
       return;
     }
 
-    // // Trying to reset the value... Not working currently
-    // this._filter = "";
     setTimeout(() => {
       this._filterChanged();
       this.comboBox._comboBox.inputElement.value = "";
     }, 0);
-    // this.comboBox._comboBox.inputElement.value = undefined;
-    // this.comboBox.value = "";
-    // this.requestUpdate();
 
     const currentValue =
       !this.value || this.value === "" ? [] : (this.value as string[]);

From 047a71bc11866b6355cd4bc929836bf922455440 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 30 Mar 2022 10:16:47 -0500
Subject: [PATCH 09/10] Reviews

---
 src/components/ha-chip-set.ts                    | 8 +-------
 src/components/ha-combo-box.ts                   | 4 ++++
 src/components/ha-selector/ha-selector-select.ts | 8 ++++----
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/ha-chip-set.ts b/src/components/ha-chip-set.ts
index 2e659c8353c8..699f1b0a730d 100644
--- a/src/components/ha-chip-set.ts
+++ b/src/components/ha-chip-set.ts
@@ -25,13 +25,7 @@ export class HaChipSet extends LitElement {
       ${unsafeCSS(chipStyles)}
 
       slot::slotted(ha-chip) {
-        margin: 4px;
-      }
-      slot::slotted(ha-chip:first-of-type) {
-        margin-left: -4px;
-      }
-      slot::slotted(ha-chip:last-of-type) {
-        margin-right: -4px;
+        margin: 4px 4px 4px 0;
       }
     `;
   }
diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index c86cb5bf7257..c1bc266ed915 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -110,6 +110,10 @@ export class HaComboBox extends LitElement {
     return this._comboBox.selectedItem;
   }
 
+  public setInputValue(value: string) {
+    this._comboBox.value = value;
+  }
+
   protected render(): TemplateResult {
     return html`
       <vaadin-combo-box-light
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index cb7553f710ad..fb51b7068c9a 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -208,11 +208,11 @@ export class HaSelectSelector extends LitElement {
   }
 
   private async _removeItem(ev) {
-    (this.value as string[])!.splice(ev.target.idx, 1);
-    this.value = [...this.value];
+    const value: string[] = [...(this.value! as string[])];
+    value.splice(ev.target.idx, 1);
 
     fireEvent(this, "value-changed", {
-      value: this.value,
+      value,
     });
     await this.updateComplete;
     this._filterChanged();
@@ -239,7 +239,7 @@ export class HaSelectSelector extends LitElement {
 
     setTimeout(() => {
       this._filterChanged();
-      this.comboBox._comboBox.inputElement.value = "";
+      this.comboBox.setInputValue("");
     }, 0);
 
     const currentValue =

From e243cf2ef2f2c4667e3f88e7c6f18a6dfa7a2ca5 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 30 Mar 2022 10:20:42 -0500
Subject: [PATCH 10/10] required

---
 src/components/ha-selector/ha-selector-select.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index fb51b7068c9a..9804a79004d2 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -108,6 +108,7 @@ export class HaSelectSelector extends LitElement {
           .hass=${this.hass}
           .label=${this.label}
           .disabled=${this.disabled}
+          .required=${this.required}
           .value=${this._filter}
           .items=${options.filter((item) => !this.value?.includes(item.value))}
           @filter-changed=${this._filterChanged}
@@ -131,6 +132,7 @@ export class HaSelectSelector extends LitElement {
           .hass=${this.hass}
           .label=${this.label}
           .disabled=${this.disabled}
+          .required=${this.required}
           .items=${options}
           .value=${this.value}
           @filter-changed=${this._filterChanged}