Skip to content
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

FloatLabel: The placeholder in the input and FloatLabel overlap each other #7102

Closed
1 of 4 tasks
Macien-BN opened this issue Jan 15, 2025 · 4 comments
Closed
1 of 4 tasks
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@Macien-BN
Copy link

Describe the bug

When using FloatLabel component with any form input component that has a placeholder, both texts (the placeholder and the FloatLabel) are displayed in the same place, causing them to overlap each other. This issue affects all form components including InputText, InputNumber, DatePicker, AutoComplete, and Select. This makes both texts illegible and creates poor user experience.

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/5ecwrupg-5owlkjfp?file=src%2FApp.vue

Environment

PrimeVue Version: 4.2.5
Vue Version: 3.5.13
Node Version: 22.13.0
OS: Linux Mint (latest)

Label Label Label Label Label
<script setup> import { ref } from 'vue'; const value1 = ref(null); const value2 = ref(null); const value3 = ref(null); const value4 = ref(null); const value5 = ref(null); const items = ref([]); const search = (event) => { items.value = [...Array(10).keys()].map((item) => event.query + '-' + item); }; const selectedCity = ref(); const cities = ref([ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' }, ]); </script>

Vue version

3.5.13

PrimeVue version

4.2.5

Node version

22.13.0

Browser(s)

No response

Steps to reproduce the behavior

  1. Create a new project with PrimeVue v4.2.5
  2. Add FloatLabel components with different form inputs inside (InputText, InputNumber, DatePicker, AutoComplete, Select)
  3. Add a placeholder attribute to each input component
  4. Add a label inside each FloatLabel
  5. Run the project
  6. Observe that the placeholder text and the label are overlapping each other in all components

Expected behavior

When an input field has both a placeholder and FloatLabel:

  1. Initially, only the label should be visible in the input field
  2. When the input receives focus, the label should float up
  3. Only after the label has floated up, the placeholder text should become visible inside the input field
  4. This sequence ensures that the placeholder and label never overlap and remain clearly readable at all times
@Macien-BN Macien-BN added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 15, 2025
@qlptmckinley
Copy link

We just noticed this as well. Thought it was a styling issue at first but you are correct. It's showing the placeholder and the label together which makes it look bold/strange.

@tugcekucukoglu
Copy link
Member

Thanks for the stackblitz demo. FloatLabel itself is a placeholder. And using FloatLabel and placeholder is not our spec. The best practice is choosing one of them.

@gcorso-nx
Copy link

But what if we don't specify a placeholder by our own, but the browser does it automatically, e.g. when you use an input type date?

<FloatLabel variant="on">
  <InputText name="startDate" type="date" title="Start date" />
  <label for="startDate">Start date</label>
</FloatLabel>

Image

This leads to inconsistent design within forms, just because the type of input differs.

I can not think of an alternative solution, besides manually recreating styles or overwritting behaviour for that, to match with the other scenarios.

@brambekkers
Copy link

I agree. There should be an option to use the label and the placeholder at the same time. Label can be the name for the field and the placeholder a suggestion how to use this field. What input to give.

For example:
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

5 participants