fix(select): popover is full width when used with floating/stacked labels (#26907)

resolves #26903

core/src/components/select/select.tsx

@@ -453,7 +453,7 @@ export class Select implements ComponentInterface {
   }
 
   private async openPopover(ev: UIEvent) {
-    const { fill } = this;
+    const { fill, labelPlacement } = this;
     const interfaceOptions = this.interfaceOptions;
     const mode = getIonMode(this);
     const showBackdrop = mode === 'md' ? false : true;
@@ -479,11 +479,13 @@ export class Select implements ComponentInterface {
         size = 'cover';
       }
     } else {
+      const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
       /**
        * The popover should take up the full width
-       * when using a fill in MD mode.
+       * when using a fill in MD mode or if the
+       * label is floating/stacked.
        */
-      if (mode === 'md' && fill !== undefined) {
+      if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
         size = 'cover';
 
         /**

core/src/components/select/test/popover-size/select.e2e.ts

@@ -0,0 +1,104 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+class SelectPopoverSizeFixture {
+  readonly page: E2EPage;
+
+  constructor(page: E2EPage) {
+    this.page = page;
+  }
+
+  async setContent(placement: string, fill?: string) {
+    const { page } = this;
+    const fillString = fill !== undefined ? ` fill=${fill}` : '';
+    await page.setContent(`
+      <ion-select interface="popover" label="My Label" label-placement="${placement}"${fillString}>
+        <ion-select-option value="apple">Apple</ion-select-option>
+      </ion-select>
+    `);
+  }
+
+  async openPopover() {
+    const { page } = this;
+
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+    await page.click('ion-select');
+
+    await ionPopoverDidPresent.next();
+  }
+
+  async expectPopoverSize(size: string) {
+    const { page } = this;
+
+    const popover = page.locator('ion-popover');
+
+    await expect(popover).toHaveJSProperty('size', size);
+  }
+}
+
+test.describe('select: popover sizing', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+  });
+
+  test('popover should have cover size with a floating label', async ({ page }) => {
+    const fixture = new SelectPopoverSizeFixture(page);
+
+    await fixture.setContent('floating');
+    await fixture.openPopover();
+    await fixture.expectPopoverSize('cover');
+  });
+
+  test('popover should have cover size with a stacked label', async ({ page }) => {
+    const fixture = new SelectPopoverSizeFixture(page);
+
+    await fixture.setContent('stacked');
+    await fixture.openPopover();
+    await fixture.expectPopoverSize('cover');
+  });
+
+  test('popover should have auto size with a start label', async ({ page }) => {
+    const fixture = new SelectPopoverSizeFixture(page);
+
+    await fixture.setContent('start');
+    await fixture.openPopover();
+    await fixture.expectPopoverSize('auto');
+  });
+
+  test('popover should have auto size with a end label', async ({ page }) => {
+    const fixture = new SelectPopoverSizeFixture(page);
+
+    await fixture.setContent('end');
+    await fixture.openPopover();
+    await fixture.expectPopoverSize('auto');
+  });
+
+  test('popover should have auto size with a fixed label', async ({ page }) => {
+    const fixture = new SelectPopoverSizeFixture(page);
+
+    await fixture.setContent('fixed');
+    await fixture.openPopover();
+    await fixture.expectPopoverSize('auto');
+  });
+
+  test('popover should have cover size with outline fill in MD', async ({ page, skip }) => {
+    skip.mode('ios');
+
+    const fixture = new SelectPopoverSizeFixture(page);
+
+    await fixture.setContent('start', 'outline');
+    await fixture.openPopover();
+    await fixture.expectPopoverSize('cover');
+  });
+
+  test('popover should have cover size with solid fill in MD', async ({ page, skip }) => {
+    skip.mode('ios');
+
+    const fixture = new SelectPopoverSizeFixture(page);
+
+    await fixture.setContent('start', 'solid');
+    await fixture.openPopover();
+    await fixture.expectPopoverSize('cover');
+  });
+});