Fix variable naming and popover

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.6.ha.1",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.3",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",

src/components/ha-target-picker.ts

@@ -70,7 +70,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ attribute: "add-on-top", type: Boolean }) public addOnTop = false;
 
-  @state() private _addMode = false;
+  @state() private _open = false;
 
   @state() private _addTargetWidth = 0;
 
@@ -78,7 +78,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @state() private _pickerFilters: TargetTypeFloorless[] = [];
 
-  @state() private _pickerOpen = false;
+  @state() private _bottomSheetOpen = false;
 
   @query(".add-target-wrapper") private _addTargetWrapper?: HTMLDivElement;
 
@@ -263,9 +263,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           <ha-svg-icon .path=${mdiPlaylistPlus} slot="start"></ha-svg-icon>
           ${this.hass.localize("ui.components.target-picker.add_target")}
         </ha-button>
-        ${!this._narrow
+        ${!this._narrow && this._open
           ? html`
               <wa-popover
+                open
                 style="--body-width: ${this._addTargetWidth}px;"
                 without-arrow
                 distance="-4"
@@ -278,14 +279,16 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 ${this._renderTargetSelector()}
               </wa-popover>
             `
-          : html`<ha-bottom-sheet
-              @closed=${this._hidePicker}
-              .open=${this._pickerOpen}
-              @wa-after-show=${this._showSelector}
-              flexcontent
-            >
-              ${this._renderTargetSelector(true)}
-            </ha-bottom-sheet>`}
+          : this._bottomSheetOpen
+            ? html`<ha-bottom-sheet
+                @closed=${this._hidePicker}
+                .open=${this._bottomSheetOpen}
+                @wa-after-show=${this._showSelector}
+                flexcontent
+              >
+                ${this._renderTargetSelector(true)}
+              </ha-bottom-sheet>`
+            : nothing}
       </div>
       ${this.helper
         ? html`<ha-input-helper-text .disabled=${this.disabled}
@@ -307,9 +310,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   }
 
   private _handleResize = () => {
-    this._addMode = false;
+    this._open = false;
     this._pickerPopover?.hide();
-    this._pickerOpen = false;
+    this._bottomSheetOpen = false;
     this._narrow =
       window.matchMedia("(max-width: 870px)").matches ||
       window.matchMedia("(max-height: 500px)").matches;
@@ -317,15 +320,15 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   private _showPicker() {
     this._addTargetWidth = this._addTargetWrapper?.offsetWidth || 0;
-    this._pickerOpen = true;
+    this._bottomSheetOpen = true;
     if (!this._narrow) {
-      this._addMode = true;
+      this._open = true;
     }
   }
 
   // wait for drawer animation to finish
   private _showSelector = () => {
-    this._addMode = true;
+    this._open = true;
   };
 
   private _handleUpdatePickerFilters(ev: CustomEvent<TargetTypeFloorless[]>) {
@@ -337,8 +340,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   };
 
   private _hidePicker() {
-    this._pickerOpen = false;
-    this._addMode = false;
+    this._bottomSheetOpen = false;
+    this._open = false;
 
     if (this._newTarget) {
       this._addTarget(this._newTarget.id, this._newTarget.type);
@@ -347,7 +350,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   }
 
   private _renderTargetSelector(dialogMode = false) {
-    if (!this._addMode) {
+    if (!this._open) {
       return nothing;
     }
     return html`
@@ -400,7 +403,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   ) => {
     ev.stopPropagation();
 
-    this._pickerOpen = false;
+    this._bottomSheetOpen = false;
     this._pickerPopover?.hide();
 
     if (!ev.detail.type || !ev.detail.id) {
@@ -412,7 +415,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   };
 
   private _handleCreateDomain = (ev: CustomEvent<string>) => {
-    this._pickerOpen = false;
+    this._bottomSheetOpen = false;
     this._pickerPopover?.hide();
 
     const domain = ev.detail;

yarn.lock

@@ -1942,9 +1942,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0-beta.6.ha.1":
-  version: 3.0.0-beta.6.ha.1
-  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.1"
+"@home-assistant/webawesome@npm:3.0.0-beta.6.ha.3":
+  version: 3.0.0-beta.6.ha.3
+  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.3"
   dependencies:
     "@ctrl/tinycolor": "npm:4.1.0"
     "@floating-ui/dom": "npm:^1.6.13"
@@ -1955,7 +1955,7 @@ __metadata:
     lit: "npm:^3.2.1"
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
-  checksum: 10/c9510e0c65b682c3868b5cbbf046f62aea30e3c5d969128d9032e0d89a8943faa4c9d78c3500446ec04cffeb0ab1939b870b60d454db657faed2aa0ac6026a3e
+  checksum: 10/a2dfeb22237428415aaa1748b0e51ffaaefbe21c065c0182fd325a7023a4bdc350858d126005c0cf21a40dbdb1029e59dcab0b0018c1dedb4d11354041db50e3
   languageName: node
   linkType: hard
 
@@ -9207,7 +9207,7 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-beta.6.ha.1"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.6.ha.3"
     "@lezer/highlight": "npm:1.2.1"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"