Bug 201121 – Displayed datalist dropdown is out of sync with datalist options elements after DOM update

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

[shrpne]

Steps to reproduce:
- Focus input element with associated datalist
- Datalist dropdown is displayed with correct options
- Replace old options HTML elements with some new options
- Dropdown stay the same with old options, no new options are displayed
- Dropdown updates to correct values only after new input focus event

Demo
https://jsfiddle.net/dkmcz16f/

Tested in the Safari 12 and Safari TP

[Radar WebKit Bug Importer]

<rdar://problem/54690831>

Any updates on this? Chrome and Firefox handle it successfully

[Aaron Barker]

Ran into this one today as well. This basically makes it so a datalist can't be used for an AJAX driven autocomplete/typeahead as the dynamically updated values are always a re-display behind.

[Chris Harrelson]

Another example:

https://codepen.io/1cg/pen/rNqKqwg?editors=1000

Type one character into the text box. It should render an overlay menu, and then change it shortly thereafter to another menu with more items. In Chrome and Firefox, it will update the overlay; in Safari it will not.

[Rob Buis]

Pull request: https://github.com/WebKit/WebKit/pull/23616

[Rob Buis]

Created attachment 469799 [details]
Behaviour with PR on OS X

Behaviour with PR on OS X

[Rob Buis]

Created attachment 469800 [details]
Behaviour with PR on iOS

Behaviour with PR on iOS.

[EWS]

Committed 274608@main (ba02cc6aade5): <https://commits.webkit.org/274608@main>

Reviewed commits have been landed. Closing PR #23616 and removing active labels.

[Ryosuke Niwa]

This introduced a security bug.