From f2734ed90ebbc323c1b2673446ec7175e043113a Mon Sep 17 00:00:00 2001
From: Axel Cureno Basurto <axel@adobe.com>
Date: Wed, 4 Dec 2024 19:33:33 -0800
Subject: [PATCH] Refactor MasSurfacePicker to use 'sp-announce-selected' event
 and streamline handleSelection logic

---
 studio/src/mas-surface-picker.js | 57 +++++++++++++++++---------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/studio/src/mas-surface-picker.js b/studio/src/mas-surface-picker.js
index 2ff0b747..26e959da 100644
--- a/studio/src/mas-surface-picker.js
+++ b/studio/src/mas-surface-picker.js
@@ -102,7 +102,10 @@ export class MasSurfacePicker extends LitElement {
     firstUpdated() {
         const spMenu = this.shadowRoot.querySelector('sp-menu');
         if (spMenu) {
-            spMenu.addEventListener('change', this.handleSelection.bind(this));
+            spMenu.addEventListener(
+                'sp-announce-selected',
+                this.handleSelection.bind(this),
+            );
         }
     }
 
@@ -124,27 +127,25 @@ export class MasSurfacePicker extends LitElement {
 
     closeDropdown() {
         this.open = false;
+
     }
 
     handleSelection(event) {
-        console.log('handleSelection called', event);
-        const selectedItem = event.target.selectedItem;
-        if (selectedItem) {
-            this.value = selectedItem.value;
-            const selectedOption = this.options.find(
-                (option) => option.value === this.value
-            );
-            this.label = selectedOption ? selectedOption.label : '';
-            this.closeDropdown();
-
-            this.dispatchEvent(
-                new CustomEvent('picker-change', {
-                    detail: { value: this.value, label: this.label },
-                    bubbles: true,
-                    composed: true,
-                })
-            );
-        }
+        const spMenu = event.target; // The sp-menu element
+        this.value = spMenu.value; // The selected value
+        const selectedOption = this.options.find(
+            (option) => option.value === this.value
+        );
+        this.label = selectedOption ? selectedOption.label : '';
+        this.closeDropdown();
+        console.log('Selected value:', this.value);
+        this.dispatchEvent(
+            new CustomEvent('picker-change', {
+                detail: { value: this.value, label: this.label },
+                bubbles: true,
+                composed: true,
+            })
+        );
     }
 
     render() {
@@ -187,15 +188,19 @@ export class MasSurfacePicker extends LitElement {
             </div>
             ${this.open
                 ? html`
-                      <sp-popover
-                          @focusout=${this.handleFocusOut}
-                          placement="bottom-start"
-                          open
-                      >
-                          <sp-menu selects="single" role="listbox">
+                      <sp-popover placement="bottom-start" open>
+                          <sp-menu
+                              @change=${this.handleSelection}
+                              selects="single"
+                              role="listbox"
+                          >
                               ${this.options.map(
                                   (option) => html`
-                                      <sp-menu-item .value=${option.value}>
+                                      <sp-menu-item
+                                          .value=${option.value}
+                                          ?selected=${this.value ===
+                                          option.value}
+                                      >
                                           ${option.label}
                                       </sp-menu-item>
                                   `,