Open Bug 1474137 Opened 2 years ago Updated 3 months ago

Dynamic datalist doesn't fully update unless backspace pressed

Categories

(Toolkit :: Form Manager, defect, P2)

defect

Tracking

()

Tracking Status
firefox61 --- affected
firefox62 --- affected
firefox63 --- affected

People

(Reporter: u587052, Unassigned)

References

(Blocks 1 open bug)

Details

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
Summary: dynamic datalist doesn't update unless backspace pressed → dynamic datalist doesn't fully update unless backspace pressed
I've uploaded the reproduce demo to http://datalist.fuzzlesoft.ca
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.
Status: UNCONFIRMED → NEW
Component: Untriaged → DOM: Core & HTML
Ever confirmed: true
Product: Firefox → Core
See Also: → 1340459
Version: 61 Branch → Trunk
Priority: -- → P3
This isn't related to the @autocomplete attribute so removing the See Also.
See Also: 1340459
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).
Workaround: on the <input>, set autocomplete="off"
See Also: → 1351483
Duplicate of this bug: 1351483

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.

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

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

Duplicate of this bug: 1438275

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.

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

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.

Correct previous message:

  1. Go to https://codesandbox.io/s/optimistic-borg-pq1vx
  2. Type "foobar@" in the email box.
Component: DOM: Core & HTML → Form Manager
Priority: P3 → P2
Product: Core → Toolkit
Summary: dynamic datalist doesn't fully update unless backspace pressed → Dynamic datalist doesn't fully update unless backspace pressed
Duplicate of this bug: 1617545

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?

Blocks: input-list
You need to log in before you can comment on or make changes to this bug.