fix(select): setting options async updates rendered text (#26667)

resolves #19324

core/src/components/select/select.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import type {
@@ -166,6 +166,14 @@ export class Select implements ComponentInterface {
 
     this.mutationO = watchForOptions<HTMLIonSelectOptionElement>(this.el, 'ion-select-option', async () => {
       this.updateOverlayOptions();
+
+      /**
+       * We need to re-render the component
+       * because one of the new ion-select-option
+       * elements may match the value. In this case,
+       * the rendered selected text should be updated.
+       */
+      forceUpdate(this);
     });
   }
 

core/src/components/select/test/async/index.html

@@ -29,11 +29,15 @@
       <ion-select id="actionSheet" interface="action-sheet" placeholder="A Placeholder"></ion-select>
     </ion-item>
 
+    <ion-select id="with-value" placeholder="With Value" value="bird"></ion-select>
+
+    <button id="set-contents" onclick="setContents()">Set Contents</button>
+
     <script>
       let selects = document.querySelectorAll('ion-select');
       const options = ['bird', 'dog', 'shark', 'lizard'];
 
-      setTimeout(() => {
+      const setContents = () => {
         selects.forEach((select) => {
           options.forEach((option) => {
             let o = document.createElement('ion-select-option');
@@ -44,10 +48,8 @@
           });
 
           select.value = options[0];
-
-          window.dispatchEvent(new CustomEvent('selectValueSet'));
         });
-      }, 1000);
+      };
     </script>
   </body>
 </html>

core/src/components/select/test/async/select.e2e.ts

@@ -2,16 +2,23 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('select: async', () => {
-  test('should correctly set the value after a delay', async ({ page, skip }) => {
+  test.beforeEach(async ({ page, skip }) => {
     skip.rtl('This is checking internal logic. RTL tests are not needed');
+    skip.mode('md');
 
     await page.goto(`/src/components/select/test/async`);
-    const selectValueSet = await page.spyOnEvent('selectValueSet');
+  });
-
+  test('should correctly set the value after a delay', async ({ page }) => {
-    const select = await page.locator('#default');
+    const select = page.locator('#default');
-
+    await page.click('#set-contents');
-    await selectValueSet.next();
 
     await expect(select).toHaveJSProperty('value', 'bird');
   });
+
+  test('should re-render when options update but value is already set', async ({ page }) => {
+    const select = page.locator('#with-value');
+    await page.click('#set-contents');
+
+    await expect(select.locator('.select-text')).toHaveText('bird');
+  });
 });