Skip to content

fix(label): do not show placeholder with floating label until focus #22958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 1, 2021

Conversation

brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Feb 22, 2021

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

  • A placeholder with a floating label would appear when unfocused
  • If no placeholder exists, then you add one, the label doesn't float

Issue Number: fixes #17571

What is the new behavior?

  • Hides the placeholder until it is focused (floating labels only)
  • If you add a placeholder after the component is loaded it now updates the item class to float the label properly

Does this introduce a breaking change?

  • Yes
  • No

Other information

This is a design improvement that gets us closer to the MD spec here:

image

It is currently applied to iOS too, may need a design decision on this.

Sorry, something went wrong.

@github-actions github-actions bot added the package: core @ionic/core package label Feb 22, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
…with-placeholde# Please enter a commit message to explain why this merge is necessary,
@github-actions github-actions bot added package: angular @ionic/angular package package: react @ionic/react package package: vue @ionic/vue package labels Mar 1, 2021
@liamdebeasi liamdebeasi force-pushed the fix-floating-label-with-placeholder branch from 5edad05 to 7f7fb96 Compare March 1, 2021 16:37
@github-actions github-actions bot removed package: react @ionic/react package package: angular @ionic/angular package package: vue @ionic/vue package labels Mar 1, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@brandyscarney brandyscarney merged commit 9282aa6 into master Mar 1, 2021
@brandyscarney brandyscarney deleted the fix-floating-label-with-placeholder branch March 1, 2021 20:36
cerkiner added a commit to cerkiner/ionic that referenced this pull request Mar 2, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
* master: (284 commits)
  fix(label): only show placeholder with floating label when focused (ionic-team#22958)
  feat(react): add react hooks to control overlay components (ionic-team#22484)
  feat(vue): add composition API ionic lifecycle hooks (ionic-team#22970)
  chore(): run build
  5.5.5
  fix(vue): account for event name changes in vue 3.0.6+
  fix(react, vue): navigating using ion-back-button now selects correct page (ionic-team#22974)
  fix(progress-bar): use correct theme colors in dark mode (ionic-team#22965)
  fix(progress-bar): add width transition (ionic-team#22964)
  fix(vue): prevent race conditions when opening overlays (ionic-team#22883)
  fix(progress-bar): use correct theme colors in dark mode (ionic-team#22957)
  feat(searchbar): add showClearIcon property (ionic-team#22759)
  test(): update theming test with latest dark mode values (ionic-team#22956)
  chore(): update package-lock to account for npm 7.5.3 bug fix (ionic-team#22963)
  fix(header): collapsed toolbar is no longer incorrectly shown when using ion-refresher (ionic-team#22937)
  fix(react): onIonTabsWillChange and onIonTabsDidChange event handlers are now properly bound to IonTabs (ionic-team#22233)
  fix(refresher): add correct dark mode styles (ionic-team#22639)
  feat(custom-elements): add experimental custom elements build  (ionic-team#22863)
  fix(a11y): improve support for ids with special characters when getting label element (ionic-team#22680)
  chore(): update code of conduct (ionic-team#22619)
  ...
@alanmontgomery
Copy link

alanmontgomery commented Mar 11, 2021

This is still an issue with IonSelect and IonDateTime - I can see it's fixed for IonInput but still an issue for these 2 components. Previous versions, the placeholder text would have been visible even on an unfocused input with the floating label already in the "highest" position as if there was a value. With the latest change, there is no placeholder until you click the input (it becomes focused).

Is this the intended functionality? To change how it was previously? I've only noticed this after upgrading Ionic core and Ionic React in one of our apps from 5.3.1 to 5.6 and I've had to downgrade now.

Screen.Recording.2021-03-11.at.16.15.07.mov

EDIT:
Textarea's as well
Screenshot 2021-03-11 at 17 52 44

@alanmontgomery
Copy link

alanmontgomery commented Mar 11, 2021

Here's how it looked previously
Screenshot 2021-03-11 at 16 24 39

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.

Floating labels and placeholder text no longer play well together
3 participants