From dfbaaac0195c5858f611aa1c37a379b117efb6fa Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 28 Oct 2024 12:46:13 -0400
Subject: [PATCH] fix labels when updated dynamically

---
 docs/docs/resources/changelog.md     |  1 +
 src/components/option/option.test.ts | 14 +-------------
 src/components/option/option.ts      | 22 +++++++---------------
 src/components/select/select.ts      |  3 ++-
 4 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 731795c24..796ff60af 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -18,6 +18,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Added more resilient support for lazy loaded options in `<wa-select>`
 - Fixed a bug in `<wa-relative-time>` where the title attribute would show with redundant info
 - Fixed a bug in `<wa-tooltip>` that caused a memory leak in disconnected elements
+- Fixed a bug in `<wa-select>` that prevented label changes in `<wa-option>` from updating the controller
 - Improved alignment of the play icon in `<wa-animated-image>`
 
 ## 3.0.0-alpha.3
diff --git a/src/components/option/option.test.ts b/src/components/option/option.test.ts
index 39fb7be1b..74ae3b20e 100644
--- a/src/components/option/option.test.ts
+++ b/src/components/option/option.test.ts
@@ -1,7 +1,6 @@
-import { aTimeout, expect, waitUntil } from '@open-wc/testing';
+import { aTimeout, expect } from '@open-wc/testing';
 import { fixtures } from '../../internal/test/fixture.js';
 import { html } from 'lit';
-import sinon from 'sinon';
 import type WaOption from './option.js';
 
 describe('<wa-option>', () => {
@@ -35,17 +34,6 @@ describe('<wa-option>', () => {
         expect(el.getAttribute('aria-disabled')).to.equal('true');
       });
 
-      it('emits the slotchange event when the label changes', async () => {
-        const el = await fixture<WaOption>(html` <wa-option>Text</wa-option> `);
-        const slotChangeHandler = sinon.spy();
-
-        el.addEventListener('slotchange', slotChangeHandler);
-        el.textContent = 'New Text';
-        await waitUntil(() => slotChangeHandler.calledOnce);
-
-        expect(slotChangeHandler).to.have.been.calledOnce;
-      });
-
       it('should convert non-string values to string', async () => {
         const el = await fixture<WaOption>(html` <wa-option>Text</wa-option> `);
 
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
index 97610bf0c..4281887ce 100644
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -36,7 +36,6 @@ import type { CSSResultGroup } from 'lit';
 export default class WaOption extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 
-  private cachedTextLabel: string;
   // @ts-expect-error - Controller is currently unused
   private readonly localize = new LocalizeController(this);
 
@@ -63,20 +62,13 @@ export default class WaOption extends WebAwesomeElement {
   }
 
   private handleDefaultSlotChange() {
-    const textLabel = this.getTextLabel();
-
-    // Ignore the first time the label is set
-    if (typeof this.cachedTextLabel === 'undefined') {
-      this.cachedTextLabel = textLabel;
-      return;
-    }
-
-    // When the label changes, emit a slotchange event so parent controls see it
-    if (textLabel !== this.cachedTextLabel) {
-      this.cachedTextLabel = textLabel;
-      /** @internal - prevent the CEM from recording this event */
-      this.dispatchEvent(new Event('slotchange', { bubbles: true, composed: false, cancelable: false }));
-    }
+    // When the label changes, tell the controller to update
+    customElements.whenDefined('wa-select').then(() => {
+      const controller = this.closest('wa-select');
+      if (controller) {
+        controller.handleDefaultSlotChange();
+      }
+    });
   }
 
   private handleMouseEnter() {
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index a2f1d9bec..346177bef 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -541,7 +541,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     }
   }
 
-  private handleDefaultSlotChange() {
+  /* @internal - used by options to update labels */
+  public handleDefaultSlotChange() {
     if (!customElements.get('wa-option')) {
       customElements.whenDefined('wa-option').then(() => this.handleDefaultSlotChange());
     }