FloatLabel: Float Label Doesn't Reset When Password Component is Cleared Programmatically

[BenJackGill]

Describe the bug

When using the Password component with FloatLabel, programmatically clearing the password input successfully clears the input value, but the float label remains in the floated state.

This issue does not occur when manually deleting the input using the keyboard. Additionally, using a regular TextInput with FloatLabel works correctly for both programmatic and manual clearing, with the float label resetting as expected. The issue only appears with Password and FloatLabel and programmatically clearing the input.

<template>
  <div class="card flex flex-col justify-center items-center gap-4">
    <FloatLabel variant="on">
      <Password v-model="password" inputId="on_label" />
      <label for="on_label">Type a password here</label>
    </FloatLabel>

    <Button @click="hanldeClick"
      >Then click here to clear it programmatically</Button
    >
  </div>
</template>

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

const password = ref(null);

// This should clear the input and reset the float label
// The bug is that the input is cleared but the float label
// is not reset, it stays in the floated position.
const hanldeClick = () => {
  password.value = null;
};
</script>

Reproducer

https://stackblitz.com/edit/8sfkmah9-stttpk9k?file=src%2FApp.vue

PrimeVue version

4.2.5

Vue version

4.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

1. Open the live reproduction link
2. Enter a password into the Password component. Observe that the float label moves above the input as expected.
3. Click the "Clear" button to clear the input.
4. Observe that the password input is cleared successfully, but the float label remains in the floated state instead of resetting to its original position.

Expected behavior

Clicking the "Clear" button should clear the password input and reset the float label to its initial position (i.e., not floated).

[github-actions]

Due to PrimeVue team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨