5

I am going through the bootstrap 4 documentation. What purpose does it do to set the autocomplete tag to off? Is this something needed for bootstrap, or is it just good practice?

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" 
checked> Active
  </label>
</div>
smilingfrog
  • 376
  • 3
  • 14
  • Possible duplicate of [HTML refuses to check radio button by default?](https://stackoverflow.com/questions/15009597/html-refuses-to-check-radio-button-by-default) – David Liang May 24 '19 at 21:15
  • I have three answers, sort of. The duplicate question suggests that autocomplete works with radio buttons, and @Daemonleak states that it isn't. It suggests that it is good practice to turn it off, just in case, but are radio buttons affected? – smilingfrog May 25 '19 at 17:52
  • The duplicate question suggests that autocomplete not only works with radio buttons, but also brings unwanted effects... – David Liang May 26 '19 at 06:38

4 Answers4

8

Unlike other browsers, Firefox by default persists the dynamic checked state of an <input> across page loads. Use the autocomplete attribute to control this feature.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

dontangg
  • 4,729
  • 1
  • 26
  • 38
0

Radio inputs are not compatible with autocomplete. However, it doesn’t hurt anything to have it there. It’s up to you if you want to keep it.

Daemonleak
  • 57
  • 5
0

The docs are confused on this. The link posted by @dontangg states autocomplete is used on radio buttons by Firefox, but the main doc page for the <input> element type explicitly says the opposite:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete

It probably doesn't hurt to include it but to me it doesn't make much sense for it to do anything on radio buttons.

yaz_ozzie
  • 33
  • 1
  • 5
  • Though https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete suggests Firefox might actually use it even for attributes that normally wouldn't. – yaz_ozzie Dec 15 '20 at 11:09
0

It's about the browser stage.

<script type="text/javascript">
function fnPickedFlow(){
    return #('input[name=pickedFlow]:checked').val();
}

$( document ).ready(function() {
    console.log( "pickedFlow:" + fnPickedFlow() );
    // The first time return "one"
    // The second time return "two"
});
</script>

<input type="radio" name="pickedFlow" value="one" checked/>
<input type="radio" name="pickedFlow" value="two" />

The first time when page loads, Radio button one is selected by default. When changing the selection to two and submitting, the redirection happens. And user click browser back button (javascript:history.back()) to come back to this page, pickedFlow is pointing to one but the selected button in UI is two.

Change code add autocomplete off for each of radio button to avoid the situation:

<script type="text/javascript">
function fnPickedFlow(){
    return #('input[name=pickedFlow]:checked').val();
}

$( document ).ready(function() {
    console.log( "pickedFlow:" + fnPickedFlow() );
    // Always return "one"
});
</script>

<input type="radio" name="pickedFlow" value="one" autocomplete="off" checked/>
<input type="radio" name="pickedFlow" value="two" autocomplete="off" />

Also see: https://forum.vuejs.org/t/radio-button-retains-old-state-on-browser-back-button/97417

Raichu
  • 1