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>
This commit is contained in:
Liam DeBeasi
2023-05-12 11:17:10 -04:00
committed by GitHub
parent 7b7e05aa69
commit 921bfae9e6
26 changed files with 28 additions and 6 deletions

View File

@ -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(
`