1351483 - dynamically added datalist does not show when appened after the input its assigned to already has a value

Status: RESOLVED DUPLICATE of bug 1474137

(Toolkit :: Form Manager, defect)

Description

[yair even or]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20161104212021

Steps to reproduce:

1. Go to http://jsbin.com/qoxawiyisi/edit?html,js,output
2. type "AAA"
3. should see datalist suggestions showing after 3 characters were typed
4. type "AAAA"
5. hit "backspace" to delete one character. 
6. Datalist only appears once a character was removed, but not added

This is the code needed:

var datalist = `<datalist id="foo">
    <label>select from the list:
        <select>
            <option>aaaaaa</option>
            <option>aaaaa1</option>
            <option>aaaaa1</option>
            <option>bb111</option>
            <option>bb122</option>
        </select>
    </label>
</datalist>`;

// Add the datalist to the DOM if more than 2 characters were input
document.querySelector('input[list]').addEventListener('input', function(){
  if( this.value.length > 1 ){
    document.body.insertAdjacentHTML('beforeend', datalist);
  }
})




Actual results:

as long as the value of the input which is attached to the datalist gets more characters, the datalist will never render. it only renders when a single character or more are removed from the input (via "backspace" or selecting a character and clicking "cut" in the context menu with the mouse)


Expected results:

This does work well on Chrome. it should show the datalist after 3 characters were input, because the datalist is in the DOM and should be rendered.

If you change the code JS line in the demo page to:
    
    this.value.length > 1

then it does work.

Comment 1

[Emil Pasca [:emilpasca]]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:55.0) Gecko/20100101 Firefox/55.0

I have tested this issue on Windows 10 x64 with the latest Firefox release (52.0.2) and the latest Nightly (55.0a1-20170330030213) and managed to reproduce it.
After opening the testcase provided in the description, when typing "AAA" or "AAAA", no suggestions from the datalist were displayed, however, after removing a character using the backspace key, the suggestions were displayed.

Comment 2

[support]

User agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0

Having a similar issue when injecting the option-tags(not sure if its the same bug). The list shows for less then a second when typing and then disappears and have some generally odd behavior.

http://jsbin.com/resiwaj/edit?html,css,js,output

The issue is new for me in Firefox 52 (Also did a testrun on Browserstack, no issues there with version 45,49,51,53,54 but same issue with 52(all tests there with win 10)).

Comment 3

[gaby de wilde]

The way suggestions are triggered is not as smooth or logical as it should be.

I tried to describe all the behaviors but failed, it is better to play with it yourself:

https://jsfiddle.net/gaby_de_wilde/eumxoudn/19/

It seems to have a will of its own with...

double click in stead of focus triggering it (preventing select all)
the first instance of options added also triggers it.
the first key stroke displays the current set.

Further double clicking doesn't show further added options,
Further added options doesn't do anything (except scroll the suggestions to the top in an annoying way)
Typing doesn't show new options (unless you press backspace as noted in top post)

Unfocus > double click updates the suggestions.

And of course it ignores programatically added keyEvents rendering the webmaster without hope and sending him on a quest for a library. This while in my opinion, without the glitches, this would be the nicest form toy in the box.

Hope this helps

Comment 4

[Karl Dubost💡 :karlcow]

This seems to be a duplicate of Bug 1474137