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

[Macien-BN]

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

[qlptmckinley]

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.