Auto-filling custom boolean fields does not work

piotr_dobrogost · December 31, 2023, 3:03pm

There’s this page

where there are checkboxes with ids 119af685efe4b09c3d4a5db8e57a03d8 (Akeceptuję RODO) and e1a5f8912d28eda05c57d085c7eae2bd (Inwestor).

I added custom fields with these names and with type Boolean and checked them but when I run auto-fill (with ctrl+shift+L) text fields are being filled but checkboxes stay unchecked. Any ideas what’s wrong?

grb · December 31, 2023, 3:44pm

@piotr_dobrogost Welcome to the forum!

I frequently try to add custom boolean fields to my login items, and have found that they frequently do not work. I think that there is just a wide variety of methods that checkbox inputs are implemented (using various combinations of HTML, CSS, and JavaScript, etc.), that Bitwarden is only able to handle the most basic forms of checkboxes — e.g., HTML forms using <input type="checkbox"> that don’t manipulate the user entry using scripts.

piotr_dobrogost · December 31, 2023, 4:23pm

that Bitwarden is only able to handle the most basic forms of checkboxes — e.g., HTML forms using <input type="checkbox"> that don’t manipulate the user entry using scripts.

I think that’s the case here and yet it does not work:

<input class="hide-check js-check" type="checkbox" name="73f2569c583f1a9b29775d6faa37e74b[]" id="e1a5f8912d28eda05c57d085c7eae2bd" value="e1a5f8912d28eda05c57d085c7eae2bd">

<input class="hide-check js-check" type="checkbox" name="119af685efe4b09c3d4a5db8e57a03d8" id="119af685efe4b09c3d4a5db8e57a03d8" value="1">

grb · December 31, 2023, 8:15pm

The js-check class is a clue that JavaScript is being used, and if you have the browser developer tools open, you can observe the HTML being modified in real-time (by a script) when you click the check box.

piotr_dobrogost · January 1, 2024, 6:23pm

HTML being modified is outside of input element so I don’t think this is the reason why checking the checkbox does not work.

grb · January 1, 2024, 6:33pm

I’m sorry, but I’m not going to reverse-engineer the JavaScript code on that page to figure out what is blocking the auto-fill. Feel free to contact customer support or to file a report here:

cyber-o · November 11, 2024, 8:39am

I have a checkbox that Bitwarden is unable to fill when I define custom field with the name Include devices connected via Echo:

grb · November 12, 2024, 12:34am

Have you checked this in different browsers? When I try to replicate your issue, I can get such a checkbox to be autofilled by Bitwarden in Chrome, but not in Firefox. I would suggest submitting an Autofill Failure Report form.

cyber-o · November 12, 2024, 10:58am

I was using Edge but just now tried Chrome and it behaves the same: boxes remain unchecked after autofill.

<input type="checkbox" class="mdc-checkbox__native-control" name="" aria-label="Include devices connected via Echo" data-indeterminate="false" value="on">

grb · November 12, 2024, 1:22pm

@cyber-o There must be something else in that website code that is blocking the autofill of the checkboxes. I set up a basic HTML page, pasted in your checkbox code verbatim into a <form> section, and was able to autofill the checkbox (when using Chrome). Perhaps you can experiment with something similar.

raveren · December 17, 2024, 12:45pm

Broken for me as well for this simple html:


    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" name="remember" id="remember" value="1">
      <label class="custom-control-label" for="remember">Angemeldet bleiben</label>
    </div>

I debugged it a little and if I don’t include the Bootstrap 4.6.0 css - autofill starts to work.

Please fix this bug

grb · December 17, 2024, 6:33pm

I did a little additional debugging, and found that the Bootstrap CSS appears to disable and hide the true checkbox input, and then overlays a 16x16 box with rounded corners to act as a stand-in for the checkbox input. The checkbox can be autofilled if you don’t apply the class custom-control-input to the checkbox input element.

I haven’t looked into it, but I suspect that the actual conversion of a click on the checkbox into a display of a checkmark and a transmission of the “checked state” value to the server is all handled by JavaScript event handlers, bypassing the HTML <form> functionality.

I think that it would be exceedingly difficult to design an autofiller to work with this type of form without also creating numerous undesired side effects.

The bottom line is, I wouldn’t classify this as a bug, and even as a feature request, I think it is unlikely that a simple fix is possible.

raveren · December 17, 2024, 7:06pm

woah, cool find!!!

I did some debugging as well and found that bootstrap actually does not disable the checkbox it just makes it totally transparent by setting its css {opacity:0}.

It all works without js, clicking the label marks it, clicking the “stand-in” checkbox does so as well since you’re actually clicking the invisible checkbox. Or you might be in fact clicking the label, I didn’t dig that deep.

So the only special thing about this checkbox is that its opacity is zero, here’s the rest of its style rules:

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

Question is, which of these rules prevents the checkbox to be marked. Bitwarden has no qualms to fill hidden inputs if you ask it to, but it’s not working on an invisible checkbox, that does really sound like a bug.

Besides it’s not a niche library by some dude - bootstrap is widely used…

grb · December 17, 2024, 7:22pm

I also think that the negative z-index makes the element unclickable.

My understanding is that Bitwarden’s autofill code does include some logic to prevent hidden elements from being autofilled, but that this safeguard is not 100% effective (because there are so many ways to hide input elements). It is likely that having the opacity:0 is one of the parameters that Bitwarden does check when blocking autofilling of hidden fields.*

In principle, it would probably be possible for Bitwarden to implement some work-around to accommodate Bootstrap pages, but if they then have to also write custom solutions for a dozen Bootstrap alternatives, as well, I could see the code getting very bloated and inefficient.

*Edited to Add: A reasonable feature request that may have some impact on this type of form would be to suggest that Bitwarden’s autofill blocking logic for hidden elements should not apply to hidden checkbox elements.

raveren · December 18, 2024, 8:05am

I think you’re digging too deep here I think the entirety of the issue is simple!

Bitwarden does not autofill the invisible checkbox.

Even though the user clearly and explicitly showed intent to ask Bitwarden to do so - by going into the Autofill entry edit, and adding the correctly named field manually.

I’d venture to guess that Bitwarden has logic to prevent invisible fields from being auto-filled, and while it makes sense for regular user+password fields, this should not apply to the “Custom” fields.

Or, for fear of breaking some niche existing functionality, a checkbox to fill the field even if it is invisible (“force fill”) could be added to solve all future cases like this - checkbox or not…

grb · December 18, 2024, 2:38pm

Yes, that makes sense — I would be happy with such a solution.