CODEWITHSUNDEEP
htmlgoogle-chrome
KayakinKoder
KayakinKoder

Reputation: 3461

Chrome 77 caching <select> selected option, even with autocomplete="off"

If a <select> element has a selected option, Chrome will ignore that selected option even if autocomplete="off" on the <select> element when using the browser's "navigate back" functionality. One workaround I have found is wrapping the select in a <form>, but I don't want extraneous forms in my html.

Question: Is there a way to fix this in Chrome without wrapping in a form element? (This behavior does not occur in Firefox, haven't tested other browsers)

To reproduce, using Chrome 77:

1.) Visit this jsfiddle, and change both selects to "One". Note that "Two" is the selected option for both, so when the page loads this is what should be selected in both elements

2.) Click on the link to google (page navigation won't actually occur, jsfiddle output can't actually navigate to webpages)

3.) With your mouse having clicked in jsfiddle output, click the browser's back button

4.) You'll note that the select element which is wrapped in a form has the correct element selected by default, "Two". The select element which is not wrapped in a form has the incorrect element selected, "One"

https://jsfiddle.net/m5hg8n40/1/

<!-- chrome ignores 'selected' -->
<select autocomplete="off">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
</select>

<br><br>
<a href="https://google.com">google.com</a>
<br><br>

<!-- chrome obeys 'selected' -->
<form autocomplete="off">
  <select>
    <option value="1">One</option>
    <option value="2" selected>Two</option>
  </select>
</form>

Upvotes: 2

Views: 3116

Answers (2)

H&#233;ctor Le&#243;n
H&#233;ctor Le&#243;n

Reputation: 2400

MAC OS Catalina 10.15

 Browsers

  • Google Chrome Version 77.0.3865.120 (Official Build) (64-bit)
  • Safari Version 13.0.2 (15608.2.30.1.1)
  • Firefox 70.0

 Actions tested:

  • Onload the jsfiddle i see both with the two option selected
  • If i click google link and go back, both keeps two selected
  • If i modify first select (without form) to one, go google and go back, it keeps the one selected
  • If i modify the second select (with form) to one, go google, and go back, it will show the two option selected

So as far as i see. On load works for both, but the window History treats slightly different both input select, if they are wrapped or not in a <form>tag

One will keep the last action executed, and the other will take priority of the form to reset its inputs to the default state.

Excepcion: Firefox treat both with the same behavior (like without the form)

For me it seems legit to use the tag there if you need it, they can be use to collect data even if they are going to be used locally or remotely. ( is not worse than pages having 1047248 <div>'s everywhere and zero semantic HTML ) so its really up to you i think. And if you need to store data in another way you could use LocalStorage

Upvotes: 2

Ruslan Kolibabchuk
Ruslan Kolibabchuk

Reputation: 177

I think you can't do anything without js.

<body onload="document.querySelector('select').value = document.querySelector('select [selected]').value">
<select>
  <option value="1">One</option>
  <option value="2" selected>Two</option>
</select>

<br><br>
<a href="https://google.com">google.com</a>
<br><br>

<form autocomplete="off">
  <select>
    <option value="1">One</option>
    <option value="2" selected>Two</option>
  </select>
</form>
</body>

Upvotes: 1

Related Questions