Skip to content

Conversation

@liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented May 10, 2023

Issue number: resolves #27201


What is the current behavior?

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?

  • 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
  • No

Other information

@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions github-actions bot added the package: core @ionic/core package label May 10, 2023
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 }) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

During development I discovered we did not have test coverage for this same behavior on ion-textarea, so I added it. ion-input has test coverage already.

@liamdebeasi liamdebeasi marked this pull request as ready for review May 11, 2023 16:46
@liamdebeasi liamdebeasi requested a review from a team as a code owner May 11, 2023 16:46
@liamdebeasi liamdebeasi added this pull request to the merge queue May 12, 2023
Merged via the queue into main with commit 921bfae May 12, 2023
@liamdebeasi liamdebeasi deleted the FW-4049 branch May 12, 2023 15:32
liamdebeasi added a commit that referenced this pull request May 15, 2023
)

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 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: select label does not cover placeholder

4 participants