Review

src/components/ha-generic-picker.ts

@@ -170,7 +170,11 @@ export class HaGenericPicker extends LitElement {
                   type="button"
                   class=${this._opened ? "opened" : ""}
                   compact
-                  .unknown=${this._unknownValue(this.value, this.getItems())}
+                  .unknown=${this._unknownValue(
+                    this.allowCustomValue,
+                    this.value,
+                    this.getItems()
+                  )}
                   .unknownItemText=${this.unknownItemText}
                   aria-label=${ifDefined(this.label)}
                   @click=${this.open}
@@ -253,9 +257,13 @@ export class HaGenericPicker extends LitElement {
   }
 
   private _unknownValue = memoizeOne(
-    (value?: string, items?: (PickerComboBoxItem | string)[]) => {
+    (
+      allowCustomValue: boolean,
+      value?: string,
+      items?: (PickerComboBoxItem | string)[]
+    ) => {
       if (
-        this.allowCustomValue ||
+        allowCustomValue ||
         value === undefined ||
         value === null ||
         value === "" ||

src/components/ha-navigation-picker.ts

@@ -29,7 +29,7 @@ export class HaNavigationPicker extends LitElement {
     this._loadNavigationItems();
   }
 
-  private _navigationItems?: PickerComboBoxItem[];
+  private _navigationItems: PickerComboBoxItem[] = [];
 
   protected render() {
     return html`
@@ -53,9 +53,7 @@ export class HaNavigationPicker extends LitElement {
   }
 
   private _valueRenderer = (itemId: string) => {
-    const item = this._navigationItems!.find(
-      (navItem) => navItem.id === itemId
-    );
+    const item = this._navigationItems.find((navItem) => navItem.id === itemId);
     return html`
       ${item?.icon
         ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
@@ -67,7 +65,7 @@ export class HaNavigationPicker extends LitElement {
     `;
   };
 
-  private _getItems = () => this._navigationItems!;
+  private _getItems = () => this._navigationItems;
 
   private async _loadNavigationItems() {
     const panels = Object.entries(this.hass!.panels).map(([id, panel]) => ({
@@ -119,7 +117,7 @@ export class HaNavigationPicker extends LitElement {
         const viewPath = `/${panel.url_path}/${view.path ?? index}`;
         const viewPrimary =
           view.title ?? (view.path ? titleCase(view.path) : `${index}`);
-        this._navigationItems!.push({
+        this._navigationItems.push({
           id: viewPath,
           secondary: viewPath,
           icon: view.icon ?? "mdi:view-compact",

src/components/ha-picker-combo-box.ts

@@ -191,10 +191,11 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
 
   protected render() {
     const searchLabel =
-      (this.label ?? this.allowCustomValue)
+      this.label ??
+      (this.allowCustomValue
         ? (this.hass?.localize("ui.components.combo-box.search_or_custom") ??
           "Search | Add custom value")
-        : (this.hass?.localize("ui.common.search") ?? "Search");
+        : (this.hass?.localize("ui.common.search") ?? "Search"));
 
     return html`<ha-textfield
         .label=${searchLabel}