Fix pickers (#20315)

* Fix not found area picker

* Fix no match for categories

src/components/ha-area-picker.ts

@@ -136,20 +136,6 @@ export class HaAreaPicker extends LitElement {
       noAdd: this["noAdd"],
       excludeAreas: this["excludeAreas"]
     ): AreaRegistryEntry[] => {
-      if (!areas.length) {
-        return [
-          {
-            area_id: NO_ITEMS_ID,
-            floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_areas"),
-            picture: null,
-            icon: null,
-            aliases: [],
-            labels: [],
-          },
-        ];
-      }
-
       let deviceEntityLookup: DeviceEntityDisplayLookup = {};
       let inputDevices: DeviceRegistryEntry[] | undefined;
       let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -288,7 +274,7 @@ export class HaAreaPicker extends LitElement {
           {
             area_id: NO_ITEMS_ID,
             floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_match"),
+            name: this.hass.localize("ui.components.area-picker.no_areas"),
             picture: null,
             icon: null,
             aliases: [],
@@ -376,20 +362,40 @@ export class HaAreaPicker extends LitElement {
 
     const filteredItems = fuzzyFilterSort<ScorableAreaRegistryEntry>(
       filterString,
-      target.items || []
+      target.items?.filter(
+        (item) => ![NO_ITEMS_ID, ADD_NEW_ID].includes(item.label_id)
+      ) || []
     );
-    if (!this.noAdd && filteredItems?.length === 0) {
+    if (filteredItems.length === 0) {
+      if (!this.noAdd) {
+        this.comboBox.filteredItems = [
+          {
+            area_id: NO_ITEMS_ID,
+            floor_id: null,
+            name: this.hass.localize("ui.components.area-picker.no_match"),
+            icon: null,
+            picture: null,
+            labels: [],
+            aliases: [],
+          },
+        ] as AreaRegistryEntry[];
+      } else {
         this._suggestion = filterString;
         this.comboBox.filteredItems = [
           {
             area_id: ADD_NEW_SUGGESTION_ID,
+            floor_id: null,
             name: this.hass.localize(
               "ui.components.area-picker.add_new_sugestion",
               { name: this._suggestion }
             ),
+            icon: "mdi:plus",
             picture: null,
+            labels: [],
+            aliases: [],
           },
-      ];
+        ] as AreaRegistryEntry[];
+      }
     } else {
       this.comboBox.filteredItems = filteredItems;
     }
@@ -409,6 +415,8 @@ export class HaAreaPicker extends LitElement {
 
     if (newValue === NO_ITEMS_ID) {
       newValue = "";
+      this.comboBox.setInputValue("");
+      return;
     }
 
     if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {

src/components/ha-floor-picker.ts

@@ -384,7 +384,7 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
         this.comboBox.filteredItems = [
           {
             floor_id: NO_FLOORS_ID,
-            name: this.hass.localize("ui.components.floor-picker.no_floors"),
+            name: this.hass.localize("ui.components.floor-picker.no_match"),
             icon: null,
             level: null,
             aliases: [],

src/panels/config/category/ha-category-picker.ts

@@ -188,9 +188,7 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
         this.comboBox.filteredItems = [
           {
             category_id: NO_CATEGORIES_ID,
-            name: this.hass.localize(
-              "ui.components.category-picker.no_categories"
-            ),
+            name: this.hass.localize("ui.components.category-picker.no_match"),
             icon: null,
           },
         ] as ScorableCategoryRegistryEntry[];

src/translations/en.json

@@ -571,6 +571,7 @@
         "add_new_sugestion": "Add new category ''{name}''",
         "add_new": "Add new category…",
         "no_categories": "You don't have any categories",
+        "no_match": "No matching categories found",
         "add_dialog": {
           "title": "Add new category",
           "text": "Enter the name of the new category.",