chore(): sync with main

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 { createLegacyFormController } from '@utils/forms';
 import type { LegacyFormController } from '@utils/forms';
 import { printIonWarning } from '@utils/logging';
@@ -248,6 +248,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

@@ -43,11 +43,15 @@
       ></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');
@@ -58,10 +62,8 @@
           });
 
           select.value = options[0];
-
-          window.dispatchEvent(new CustomEvent('selectValueSet'));
         });
-      }, 1000);
+      };
     </script>
   </body>
 </html>

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

@@ -1,18 +1,24 @@
 import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
-// TODO: This test is extremely flaky
-test.skip('select: async', () => {
-  test('should correctly set the value after a delay', async ({ page, skip }) => {
+test.describe('select: async', () => {
+  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');
-
-    const select = await page.locator('#default');
-
-    await selectValueSet.next();
+  });
+  test('should correctly set the value after a delay', async ({ page }) => {
+    const select = page.locator('#default');
+    await page.click('#set-contents');
 
     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');
+  });
 });

core/src/utils/test/overlays/overlays.e2e.ts

@@ -108,8 +108,8 @@ test.describe('overlays: focus', () => {
   test.beforeEach(({ skip }) => {
     skip.rtl();
   });
-  // TODO FW-3080
-  test.skip('should not select a hidden focusable element', async ({ page, browserName }) => {
+
+  test('should not select a hidden focusable element', async ({ page, browserName }) => {
     await page.setContent(`
       <style>
         [hidden] {