Floating labels incorrectly positioned for inputs with autofill, but no value

[Łukasz Piątkowski]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Floating labels get stuck in their transformed position for inputs that were initially auto-filled by the browser, but cleared programmatically using javascript.
ex.

$('input').val('')

example html:

<div class="form-floating string">
  <input class="form-control string" id="field" placeholder="placeholder" type="text">
  <label class="string" for="field"> Username </label>
</div>

Even though the input in its current state doesn't have any value attribute (the same applies if value=""),
it still holds its :autofill pseudo-class, therefore incorrect css rules are being applied to its label.

important note:

I observed this issue in the Firefox browser. This may be irrelevant for other browsers.

Reduced test cases

here is an example html body

<form id="login-form" action="/" accept-charset="UTF-8">
  <div class="form-floating mb-3 string required col-4">
    <input class="form-control string required" required="required" aria-required="true" placeholder="Username" type="text" id="username">
    <label class="string required custom-label" for="username"> Username </label>
  </div>

  <div class="form-floating mb-3 password required col-4">
    <input class="form-control password required" required="required" aria-required="true" placeholder="Password" type="password" id="password">
    <label class="password required custom-label" for="password"> Password </label>
  </div>

  <div class="actions mt-3">
    <input type="submit" value="Sign Up" class="btn btn-primary" data-disable-with="Sign Up">
  </div>
</form>
<br>
In order to reproduce the issue, fill up and submit the form. Then save the data in your browser and refresh the page.
<script>
  $( () => $('input').val('') )
</script>

Potential solution:
Exclude inputs with no value attribute or it being empty from the :autofill, :-webkit-autofill etc. selectors.

Edit: The solution might not work since apparently autofill in Firefox doesn't add nor update the value attribute 😮

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3.3

[github-actions]

Hello @LukaszPiatkowski27. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[Łukasz Piątkowski]

Hi @louismaximepiton,
I am unable to reproduce the issue on CodePen nor StackBlitz due to it's specific nature. It is needed for the browser to autofill the form. If someone is able to achieve that in a live demo, they are welcome to do so. I think I described the issue clear enough and provided an example for when it happens. Here is the link for it although I'm unable to reproduce the issue here!