1474137 - Dynamic datalist doesn't fully update unless backspace pressed

Status: NEW

(Toolkit :: Form Manager, defect, P2)

Description

[u587052]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180626184830
Firefox for Android

Steps to reproduce:

I've created a reproduce repository here: https://github.com/mitchhentges/firefox-dynamic-datalist-bug

1. Open `index.html` directly in a browser
2. Type in the beginning part of "summer" (e.g.: just type "sum")
3. Note that there's no results
4. Hit "backspace" once (input should contain the string "su")
5. There's results again


Actual results:

Firefox didn't show the actual matching datalist - it seems to be showing a subset of results


Expected results:

As I type in "summer", it should show "Summer [Noun]" in the results

Comment 1

[u587052]

I've uploaded the reproduce demo to http://datalist.fuzzlesoft.ca

Comment 2

[David Olah]

I managed to reproduce this issue both by the uploaded link and by dragging the downloaded HTML in the browser on Firefox 61.0.1, 62.0b7 and Nightly 63.0a1 (2018-07-11), Ubuntu 16.04.

Comment 3

[Matthew N. [:MattN]]

This isn't related to the @autocomplete attribute so removing the See Also.

Comment 4

[u587052]

My previous messages were based on commit "1c64e6f686e3d489dac0228c48c05d0e7f9520c8" for the reproduce demo.

To make locating the bug easier, I've simplified the demo in commit "eb3e0d6bbd44664bccbf1dd4110bd77e501b5f0b" to reproduce the issue without involving any network requests.

The reproduce conditions for the demo are now a little bit different and more intuitive:

1. Open http://datalist.fuzzlesoft.ca directly in a browser
2. Type the letter `s` and wait for the datalist to update (should show five items)
3. Append the letter `u` (search should be `su` now). Note that only `su1` and `su2` appear in the dropdown, even though (by inspecting the DOM) it's clear that there should be five options
4. Complete the input character-by-character until it contains the word `summer`. Note that the autocomplete dropdown isn't shown at all.
5. Hit backspace once (input should contain `summe`). Note that there's now three results in the dropdown, even though there wasn't any before (even when you had the exact same text in the input).

Comment 5

[u587052]

Workaround: on the <input>, set autocomplete="off"

Comment 7

[Matthew N. [:MattN]]

This is because we use the cached result for filtering if the results for what the user typed is now a subset of what the user had previously typed. We could disable this caching for datalist searches I guess.

Comment 8

[Kuba Orlik]

setting the autocomplete attribute to off does not reliably fix the behavior in my case.

Comment 9

[Nikita E]

Looks like https://bugzilla.mozilla.org/show_bug.cgi?id=1438275 is a duplicate of this bug

Comment 10

[Nikita E]

And one more similar: https://bugzilla.mozilla.org/show_bug.cgi?id=1528845

Comment 12

[Dzamo Norton]

For people who do use the autocomplete=off workaround, note that it (currently) breaks the datalist on Firefox for Android. I ended up using JS to set autocomplete=off only if navigator.userAgent indicates that the browser is desktop Firefox.

Comment 13

[Chi]

This workaround works for me: after change datalist dynamically with JavaScript, set input autocomplete to "off" and immediately change it back to "on".

Comment 14

[Guo Yunhe]

I have this issue, too.

1. Go to https://codesandbox.io/s/happy-merkle-mncjs
2. Type "foobar@" in the email box.

It show dropdown in Chrome but not in Firefox until you press backspace.

Comment 15

[Guo Yunhe]

Correct previous message:

1. Go to https://codesandbox.io/s/optimistic-borg-pq1vx
2. Type "foobar@" in the email box.

Comment 17

[Mark Straver]

Running into the same problem as this bug - it's P2; any chance someone will be looking at this soon? Disabling caching should not be too hard, right?