diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index e361e74a3f..e391b61694 100644 --- a/core/src/components/select/select.tsx +++ b/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'; /** diff --git a/core/src/components/select/test/popover-size/select.e2e.ts b/core/src/components/select/test/popover-size/select.e2e.ts new file mode 100644 index 0000000000..80dc91e160 --- /dev/null +++ b/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(` + + Apple + + `); + } + + 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'); + }); +});