UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
Steps to reproduce the problem:
I apologize because reproduction is proving very difficult to do reliably, if I spend 5-10 minutes try I can get it to do it, but it is really hit or miss.
1. I select a field that has an HTML5 datalist, the list of options appears, I start to type a few characters to reduce the list, then I use the keyboard to select an item in the list.
2. Once the item is selected I push the tab key on the keyboard. 95% of the time the selected text is placed in the correct input, 5% of the time the input is instead placed in the next field that the tab key focuses on.
What is the expected behavior?
I would expect the selected text always appears in the correct input, not in the next input field that is focused.
What went wrong?
I am somewhat new to troubleshooting this, the best thing I could think to do was use the Chrome performance profiler to try to capture what is occurring. So I have done that, attached are 3 screenshots the Chrome profiler captured.
"1 Before tab" is what is painted before the datalist is displayed, the user then is presented the datalist, and types a letter 'e' in the left most input in this example. You can see the field is highlighted blue because of the material design styling applied.
"2 After tab" shows the next paint event Chrome does after the user presses tab, notice the right input now has the highlighted 'e' but the material design blue highlight is still on the left most input
"3 Data in wrong input" shows the final result, the datalist item selected is now in the input field on the right even though the datalist was selected on the left input field. The material Design highlighting is just starting to draw on the right input field
I also have three screenshots of the profile waterfall
"profile timelineA" show the keypress that starts the whole event, this would be the tab key from the datalist
"profile timelineB" is the next set of events that occur between picture 2 & 3 above
"profile timelineC" is the next set of events that occur after profile timelineB until the user see the input text is now in the wrong field.
Did this work before? N/A
Chrome version: 69.0.3497.100 Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version:
Please advise if there is any more troubleshooting I should do or provide. I can reproduce this with a bit of work.
|
Deleted:
1 Before Tab.PNG
2.8 KB
|
|
|
Deleted:
2 After Tab.PNG
2.9 KB
|
|
|
Deleted:
3 Data in wrong input.PNG
3.1 KB
|
|
|
Deleted:
profile timelineA.png
131 KB
|
|
|
Deleted:
profile timelineB.PNG
82.6 KB
|
|
|
Deleted:
profile timelineC.png
68.0 KB
|
Comment 1 by viswa.karala@chromium.org
, Sep 28