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 ( { const select = page.locator('ion-select'); await expect(select).toHaveScreenshot(screenshot(`select-label-floating-no-value-placeholder`)); }); + 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 select.click(); + const cancel = page.locator("button.alert-button-role-cancel"); + await cancel.click(); + await expect(select).toHaveScreenshot(screenshot(`select-label-focus-floating-no-value-placeholder`)); + }); test('label should appear on top of the select when the select is expanded', async ({ page }) => { await page.setContent( ` diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fe6c951a93b Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..7b445470c26 Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b99926aba21 Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..cff4808dd5a Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3ce44aae084 Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c7c2d32b43b Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-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-focus-floating-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-focus-floating-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-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-focus-floating-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-focus-floating-no-value-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-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-focus-floating-no-value-placeholder-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..38fd9b502b0 Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ba09012f344 Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8874c4111ea Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-focus-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png differ