'Why use autocomplete with radio buttons?

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>
autocompletebootstrap-4radio-button


Solution 1:[1]

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

Solution 2:[2]

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.

Solution 3:[3]

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

Solution 4:[4]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dontangg
Solution 2 yaz_ozzie
Solution 3 Raichu
Solution 4 Daemonleak

Related Questions