fix(select): floating label covers placeholder when when blurred (#27446)
Issue number: resolves #27201 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Selects with a floating label, no value, and a placeholder should have the label cover the placeholder when blurred. One focus, the label should translate to the top of the select, and the placeholder should be visible. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Floating label now covers the select and hides the placeholder when the select is blurred, matching the `ion-input` and `ion-textarea` behaviors. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com>
@ -179,6 +179,19 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
const textarea = page.locator('ion-textarea');
|
||||
expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-no-value`));
|
||||
});
|
||||
test('label should appear on top of the textarea when there is a placeholder and no value', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-textarea label="Standard" label-placement="floating" placeholder="Placeholder"></ion-textarea>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const textarea = page.locator('ion-textarea');
|
||||
expect(await textarea.screenshot()).toMatchSnapshot(
|
||||
screenshot(`textarea-placement-floating-no-value-placeholder`)
|
||||
);
|
||||
});
|
||||
test('label should appear on top of the textarea when the textarea is focused', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 4.9 KiB |