electron: Datalist elements do not work

I’ve checked the current implementation in Chromium, and a lot has changed since the aforementioned nw.js implementation was created, things related to the datalist tag has been moved closer together with autofill related stuff, and the whole thing was moved out of WebKit and implemented in a separate component. I might experiment a bit more with this, but the solution might take a while (things missing from current libchromiumcontent, so those have to be included there, etc.). I’ll try to keep you guys updated.

@zcbenz is it still under inspection?

Any update?

FYI: I made a tiny workaround script “inputlistpopup.js” injecting datalist selector as a popup menu.

• https://gist.github.com/bellbind/0bc2bb6fd3392f93529504879d335fc9

No special Renderer code required except <script defer> tag in HTML or webContents.executeJavaScript() in Main code. No DOM tree modified.

// <input> "click" event listener for datalist menu popup
function popupListener(ev) {
    const {Menu, getCurrentWindow} = require("electron").remote;
    const {left, bottom, width, height} = ev.target.getBoundingClientRect();
    const listId = ev.target.getAttribute("list");
    // popup only in input's right square
    if (!listId || ev.offsetX < width - height) return;
    const css3escaped = Array.from(
        listId, ch => `\\${ch.codePointAt(0).toString(16)}`).join("");
    const query = `datalist#${css3escaped} > option[value]`;
    const template = Array.from(document.querySelectorAll(query), opt => ({
        label: opt.value,
        click() {ev.target.value = opt.value;},
    }));
    const menu = Menu.buildFromTemplate(template);
    //NOTE: popup position must cast to integer (client rect is float)
    menu.popup(getCurrentWindow(), {x: left|0, y: bottom|0, async: true});
    ev.preventDefault();
}

Having the same issue… Is it still under inspection or identified?

+1

Try setting webPreferences.experimentalFeatures = true for your BrowserWindow. It’s apparently just like flipping the enable-experimental-web-platform-features switch, as it enables grid layouts. 😃

Electron 1.4.15 (Chromium 53.0.2785.143) still have this issue

So, the update: I’ve tried to solve this with a minimal footprint in my spare time, but I didn’t have much luck. Using the implementation in chrome would bring in a looot of other components (that implementation combines datalist, autocomplete and password/creditcard fill functionality, it in itself is huuge, and requires components like webdata, because it originally was created to communicate with google servers.). I gave up pursuing this route, since I ran into a dependency on protoc stuff, and I don’t even really know what that is, but this PR disables it explicitly, and I didn’t want to create trouble with reenableing them. I’ll try to create a subset of the stuff that’s required, and create a custom implementation, if I can.

@hollowdoor this was also reported here ( #9860 ), and a fix is on the way here ( #10510 )

I’m sorry, I’ll be the annoying one here but the bug still exists on current version of electron and it seems like this issue is not getting attention anymore 😦

@metjeanjunior Thanks for the suggestion! Your example is working in my React-based project after changing class="awesomplete" to className="awesomplete" in the JSX file. I’m using electron 1.4.15 and awesomplete 1.1.1.

For anyone else using Electron/React: in order for awesomplete to work with dynamic lists, you also need to add a call to Awesomplete.evaluate() whenever the list data changes. For my case, I was able to do it as follows: 1) give the <input> a ref attribute, and 2) add a componentDidUpdate method to my component, such as follows:

componentDidUpdate: function() {
	const awesomplete = new Awesomplete(this.refs.YOURINPUT);
	awesomplete.evaluate();
}

(Replace YOURINPUT with whatever name you put in the ref attribute)

Personally, I’m not particularly happy with this approach, but at least it’s working.

awesomplete is an alternative for the time being. Can confirm that it works with the following syntax: <input class="awesomplete" data-minchars="1" data-maxitems="5" data-list="China, India, Japan, Russia, UK, USA" /> but I haven’t gotten around to testing the rest of their API.

+1

+1

So current status for those who are interested: @zcbenz told me a while back he would take a look at this on Mac, but I think he didn’t have time to come around and do it. It should work on Windows, and I haven’t tested it on any other platform.

I don’t own a Mac and so my objc++ is as good as my old norse, so it might take some time for me to do this on Mac, but if I can get my hands on a machine, I might take a look at this in my spare time.

@codebytere Please reopen, this is not fixed on macOS.

I get a drop down with datalist, but when I select an option from the drop down the input.value is not updated. The visible html input field is changed, but the value property still does not change.

Other activities do change the value. For instance if I press a letter key the value property of input does change.

The input event is also not fired on the input element on datalist selection. Which is another problem being that all the answers on stackoverflow about how to get the value from input.value after datalist selection suggest using the input event on the input element.

I’m using Linux, and electron 1.7.5

When testing I tried click, and arrow->enter to select from the datalist. Nether fired the input event. Neither updated the input.value value.

Assuming that last merge made it into the 1.7.2 release, this is also a problem on linux.

@avighier It’s not, there’s a button to add your reaction to the original comment, use it. Spamming issues with zero-content comments is rude and accomplishes nothing of value.

We need to implement corresponding Content API interfaces to make it work, related node-webkit issues: https://github.com/rogerwang/node-webkit/issues/63 https://github.com/rogerwang/node-webkit/issues/434