From c134464f6afe43387110e83d218b84b22e601485 Mon Sep 17 00:00:00 2001
From: "David F. Mulcahey" <david.mulcahey@icloud.com>
Date: Fri, 29 Mar 2019 17:02:13 -0400
Subject: [PATCH] fix area and user given name display (#3033)

---
 src/data/zha.ts                          |  4 ++--
 src/panels/config/zha/zha-device-card.ts | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/data/zha.ts b/src/data/zha.ts
index 87ac9a3a88..454ffaa85a 100644
--- a/src/data/zha.ts
+++ b/src/data/zha.ts
@@ -15,8 +15,8 @@ export interface ZHADevice {
   entities: ZHAEntityReference[];
   manufacturer_code: number;
   device_reg_id: string;
-  user_given_name: string;
-  area_id: string;
+  user_given_name?: string;
+  area_id?: string;
 }
 
 export interface Attribute {
diff --git a/src/panels/config/zha/zha-device-card.ts b/src/panels/config/zha/zha-device-card.ts
index c37d3902d9..575f29704b 100644
--- a/src/panels/config/zha/zha-device-card.ts
+++ b/src/panels/config/zha/zha-device-card.ts
@@ -55,6 +55,7 @@ class ZHADeviceCard extends LitElement {
   @property() private _serviceData?: NodeServiceData;
   @property() private _areas: AreaRegistryEntry[] = [];
   @property() private _selectedAreaIndex: number = -1;
+  @property() private _userGivenName?: string;
 
   public firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
@@ -71,9 +72,15 @@ class ZHADeviceCard extends LitElement {
 
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("device")) {
-      this._selectedAreaIndex =
-        this._areas.findIndex((area) => area.area_id === this.device!.area_id) +
-        1;
+      if (!this._areas || !this.device || !this.device.area_id) {
+        this._selectedAreaIndex = 0;
+      } else {
+        this._selectedAreaIndex =
+          this._areas.findIndex(
+            (area) => area.area_id === this.device!.area_id
+          ) + 1;
+      }
+      this._userGivenName = this.device!.user_given_name;
     }
     super.update(changedProperties);
   }
@@ -150,6 +157,7 @@ class ZHADeviceCard extends LitElement {
           <paper-input
             type="string"
             @change="${this._saveCustomName}"
+            .value="${this._userGivenName}"
             placeholder="${this.hass!.localize(
               "ui.panel.config.zha.device_card.device_name_placeholder"
             )}"
@@ -265,10 +273,12 @@ class ZHADeviceCard extends LitElement {
       return;
     }
 
+    const newAreaId = area ? area.area_id : undefined;
     await updateDeviceRegistryEntry(this.hass!, this.device.device_reg_id, {
-      area_id: area ? area.area_id : undefined,
+      area_id: newAreaId,
       name_by_user: this.device!.user_given_name,
     });
+    this.device!.area_id = newAreaId;
   }
 
   static get styles(): CSSResult[] {