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>
google.com
<br><br>
<!-- chrome obeys 'selected' -->
<form autocomplete="off">
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
</form>
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
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>
google.com
<br><br>
<form autocomplete="off">
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
</form>
</body>
Related
I have a very simple <select> dropdown with two child <option>'s:
<div>
<select>
<option
value="defaultPrice"
selected
>Price</option>
<option
value="title"
>Title</option>
</select>
</div>
When I use my mouse and click the select, I am shown the options context menu to select an option:
However, when I use my keyboard and focus the select element, the up and down keys will not bring up the same dialogue, as expected.
However when I add a label to my select, the up and down keys do show the context menu:
<div>
<label for="my-select">Sort order</label>
<select id="my-select">
<option
value="defaultPrice"
selected
>Price</option>
<option
value="title"
>Title</option>
</select>
</div>
Then, if I then add CSS to hide the label, again the dropdown will not show.
This seems to be happening wherever I've been using select drop-downs, and only seems to be an issue in Chrome (v. 77.0.3865.90).
I have no CSS included in the site yet, so it's not a styling issue.
Has anyone else encountered such an issue? Unsure if it's a problem with my markup or a bug with Chrome.
I am working in a HTML Form. I added some HTML tags including Datalist. In datalist I want to show suggestion to user with different text and want to send the different value to server.
As you can see the below image that I found on Google like datalist works like this means showing Value in left and Text in right but now its not working.
<input list="some-list">
<datalist id="some-list">
<option value="first_value">Some Description</option>
<option value="another_value">Another Thing Here</option>
<option value="first_second_third">More Stuff</option>
</datalist>
You can see a simple live FIDDLE where you can text it on Chrome Updated Version Browser.
The code is working on Edge, Firefox, Avast Secure Browser, Opera, IE11 but not on Chrome. My question is simple Why it is not working as shown in Pic in Chrome now?
Please update to latest chrome and check. its chrome browser bug.
<input type="text" list="some-list">
<datalist id="some-list">
<option value="first_value">Some Description</option>
<option value="another_value">Another Thing Here</option>
<option value="first_second_third">More Stuff </option>
</datalist>
I have a simple form with some select options that need to do stuff when the options are changed (create new form elements). This all works fine, however when a select option is chosen and the user clicks elsewhere on the page (either another form option or a blank area of the page) the text of the chosen option remains highlighted blue.
I've used select's before and not had this problem, however they weren't linked to the .change function. Is that something to do with why this is happening? Has anybody encountered this issue before? All help greaty appreciated! Code is below...
<div id="container1" class="form-group">
<label class="control-label">Select an option</label>
<div>
<select class="form-control" id="mySelect">
<optgroup label="A">
<option value="1A">Option1A</option>
<option value="2A">Option2A</option>
<option value="3A">Option3A</option>
<option value="4A">Option4A</option>
</optgroup>
<optgroup label="B">
<option value="1B">Option1B</option>
<option value="2B">Option2B</option>
<option value="3B">Option3B</option>
<option value="4B">Option4B</option>
</optgroup>
</select>
</div>
</div>
I've seen the issue brought up here
Remove Blue highlighting of option
However I don't think this quite describes my problem, as it seems to me that that person wants to remove the blue highlighting whilst using the form (hard to be 100% sure though). I don't mind the blue highlighting being there when using the form, I just want it to stop persisting when you stop using the form and do something else on the page.
UPDATE: Problem only seems to occur in Internet Explorer (tested versions 9, 10 and 11). Tested in Chrome and issue doesn't occur. Just to elaborate on the comments, the issue has nothing to do with JS (so I have removed the JQuery code and subsequent tags). The issue occurs when using optgroups in a select form. Loading the HTML outlined above into IE produces the error.
I have a basic form like so:
<form id="test-form">
<select id="multi" name="mymulti" multiple required>
<option value="">Choose a different Option</option>
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select><br>
<select id="single" name="myselect" required>
<option value="">Choose a different Option</option>
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select> <br>
<input type="submit">
</form>
The key point here is two selects, both required, but one is multiple and the other is not.
If you choose the default options (note you actually have to click on them), and then submit the form, it will tell you that the single select is required, but not the multiple select.
I looked at the relevant portion of the html5 spec, and although there is some talk about how the required select interacts with placeholder elements, I don't see anything about how multiple+required behaves.
The above behaviour is only in Chrome, other browsers seem to behave the same for both types. My question is, why? It seems... inconsistent. I understand how to work around it with some javascript, just not why I would have to? Can anyone explain the rationale behind this?
Demo (remember to actually choose the placeholder options).
Chrome is acting right here. While implementation in FF is simply simpel. But chrome's implementation does not only follow the spec, it is also simply logic. If a mutliple or size > 1 select is used, there is no placeholder by definition. And without a selected attribute there is indeed nothing :checked (i.e.: selected) initially.
In case of a single select with size=1. The select > option:first-child with an empty value is the placeholder option. And a single select has always one option :checked/selected.
Here is a definition of placeholder option in JS: https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L88-94 and here a definition of valueMissing for select: https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L128-130
At this website: http://www.salus.si/en (if you click on "change" in top banner*) the select element starts with an empty option. HTML looks like this:
<select id="cc-preference-selector-analytics">
<option value="yes">I accept</option>
<option value="no">I do not accept</option>
</select>
Here is the same select element in jsfiddle: http://www.jsfiddle.net/JG89n - which shows the first option. Why is this happening?
Thanks.
**If you have "Send do not track headers" enabled in your browser, you wont see the banner. Its a cookie consent banner which doesn't get displayed if user has this feature enabled. IE10 has it enabled by default. Banner looks like this (top of the page): *
You haven't set the default option, so it displays empty.
If you want default selection as "I accept", do this way:-
<select id="cc-preference-selector-analytics">
<option value="yes" selected="selected">I accept</option>
<option value="no">I do not accept</option>
</select>
Update:
Mostly like, this is a browser behaviour and also I think your javascript can also cause this issue.