You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Floating labels get stuck in their transformed position for inputs that were initially auto-filled by the browser, but cleared programmatically using javascript.
ex.
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
<formid="login-form" action="/" accept-charset="UTF-8"><divclass="form-floating mb-3 string required col-4"><inputclass="form-control string required" required="required" aria-required="true" placeholder="Username" type="text" id="username"><labelclass="string required custom-label" for="username"> Username </label></div><divclass="form-floating mb-3 password required col-4"><inputclass="form-control password required" required="required" aria-required="true" placeholder="Password" type="password" id="password"><labelclass="password required custom-label" for="password"> Password </label></div><divclass="actions mt-3"><inputtype="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
The text was updated successfully, but these errors were encountered:
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.
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!
Prerequisites
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.
example html:
Even though the input in its current state doesn't have any
value
attribute (the same applies ifvalue=""
),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
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
The text was updated successfully, but these errors were encountered: