Dropdown Float Label: Label is always floated

[BenJackGill]

Describe the bug

I am using Tailwind PrimeVue with the latest Aura preset.

The Dropdown Float Label feature does not work correctly because the label is always floated, even when no value is selected from the dropdown.

I'm not sure if this is a bug, or the dropdown float label feature is not yet supported on Tailwind PrimeVue. If it is the latter, can I please request the feature is added. It's very helpful for creating forms.

Here is a screenshot showing the problem where no value is selected but the label is still floated. It is using Tailwind PrimeVue and the latest Aura presets:

Here is a screenshot of how it should look. It was taken from the main PrimeVue docs:

Example Code:

<template>
  <div class="m-10">
    <FloatLabel class="w-full">
      <Dropdown
        v-model="selectedCity"
        inputId="dd-city"
        :options="cities"
        optionLabel="name"
        class="w-full"
      />
      <label for="dd-city">Select a City</label>
    </FloatLabel>
  </div>
</template>

<script setup>
import { ref } from 'vue';

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>

Reproducer

https://stackblitz.com/edit/nuxt-starter-aq6fq2?file=package.json

PrimeVue version

3.52.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

1. Go to the reproduction link and see that the label is floated before selecting a dropdown option.

Expected behavior

The label should only be floated after selecting a dropdown option.

[BenJackGill]

This same problem is happening with the Calendar element.

[Angel892]

I have same issue :(