fix(select): prevent floating label and placeholder from overlapping when focused#31276
fix(select): prevent floating label and placeholder from overlapping when focused#31276droc101 wants to merge 2 commits into
Conversation
…when focused modify placeholder visibility (opacity) css condition to show the placeholder if the select is focused *and* has no value, as opposed to only being focused closes ionic-team#30401
|
@droc101 is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
thetaPC
left a comment
thetaPC
left a comment
There was a problem hiding this comment.
Please also add a snapshot test under label/select.e2e.ts that captures a focused floating select with a placeholder and no value, so we can verify this state does not regress. Applying the has-focus class directly keeps the screenshot deterministic, following the pattern in the other select e2e tests.
| */ | ||
| :host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder, | ||
| :host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder, | ||
| :host(.has-focus.select-label-placement-floating):not(.has-value) .native-wrapper .select-placeholder, |
There was a problem hiding this comment.
Rather than hiding the placeholder here, let's float the label up on focus instead. This keeps it consistent with ion-input and matches the Material Design text field behavior, where focusing an empty field floats the label and shows the placeholder below.
Take a look at labelShouldFloat in select.tsx for where to handle this.
|
I'll look into adding the test now, but it might take a while as I am not familiar with writing snapshot tests. |
2 participants
Issue number: resolves #30401
What is the current behavior?
The floating label and placeholder on
ion-selectoverlap when focused without a valueWhat is the new behavior?
The placeholder is not shown when a floating label select is focused, as that space is taken up by the label
Does this introduce a breaking change?