UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
Example URL:
https://jsfiddle.net/tlfud/f1j7c4zw/
Steps to reproduce the problem:
1. Click an option after the second option within the select list.
2. Observe that the highlighted item is NOT the one you clicked.
What is the expected behavior?
The option that you click should be the one highlighted.
What went wrong?
The wrong option is selected/highlighted.
Does it occur on multiple sites: Yes
Is it a problem with a plugin? No
Did this work before? Yes This worked in Chrome 60.
Does this work in other browsers? Yes
Chrome version: 61.0.3163.100 Channel: stable
OS Version: 10.0
Flash Version:
This markup / CSS provided in the jsFiddle use flexbox to pull the select element down so that it occupies the full height of its container. This seems to cause the wrong option to be selected when you click on an option. The jsFiddle replicates the markup / CSS of a React application I'm working on that exhibits the same problem. I simplified it down to a minimal repro case. There's no Javascript involved here. This is pure HTML and CSS. You can also see the problem here: http://select-bug-patrontechnology.fwd.wf/. This is a simple React app exhibiting the same problem.
Comment 1 by t...@patronmanager.com
, Oct 3 2017