diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index e39856c2482..8701a7e19a0 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -1228,7 +1228,8 @@ export class Select implements ComponentInterface { * TODO(FW-5592): Remove hasStartEndSlots condition */ const labelShouldFloat = - labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots)); + labelPlacement === 'stacked' || + (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots)); return ( }); }); }); + +/** + * This behavior does not vary across modes/directions + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('select: floating label focus'), () => { + test('label should appear on top of the select when it is focused, has a placeholder, and no value', async ({ + page, + }) => { + await page.setContent( + ` + + Apples + + `, + config + ); + + const select = page.locator('ion-select'); + await page.locator('ion-select button').focus(); + await expect(select).toHaveScreenshot(screenshot(`select-label-floating-focus-no-value-placeholder`)); + }); + }); +}); diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1ddc9fb1414 Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..dd6ca99b04f Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..89bb6f642ba Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png differ