bug: select label does not cover placeholder #27201
Labels
Comments
liamdebeasi
changed the title
liamdebeasi
added
package: core
|
@EinfachHans can you assign this issue to me? |
I'm not working on the ionic framework but created a couple of merged pull requests myself. So if you are interested in fixing this bug you can create a PR of course 😊 Just follow the contribution guideline and the team will appreciate it |
2 tasks
liamdebeasi
added a commit
that referenced
this issue
May 12, 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 <hi@ionicframework.com>
liamdebeasi
added a commit
that referenced
this issue
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 <hi@ionicframework.com>
|
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
When you have an floating md select with label and placeholder and no value selected the select appears buggy (see linked stackblitz)
Expected Behavior
I added to the stackblitz the current implementation of the same thing in the input coponent. That's how the select should work as well, so: Only show the label, if the select has focus: show the placeholder
Steps to Reproduce
Open attached stackblitz
Code Reproduction URL
https://github-1mgkjv-k38jrw.stackblitz.io
Ionic Info
Starter project
Additional Information
No response
The text was updated successfully, but these errors were encountered: