mfranzke / datalist-polyfill Goto Github PK

Due to the changes by #39 to support IE10+ and EDGE the script doesn't execute correctly as .dataset is being used.

Here's a strange one!

While testing in Safari 12.0.3, I noticed that when the datalist element is moved somewhere that it is not a sibling of the corresponding input, the select list hosting the suggestions is not rendered in the correct place:

https://codepen.io/anon/pen/VRpGOM

After choosing a suggestion out of the polyfilling select, the select itself wouldn't get hidden.

Suggestions being clicked on wouldn‘t get inserted into the input any more.

After the newest complex release sadly a new bug got introduced.

Hello,

I tried the demo page https://mfranzke.github.io/datalist-polyfill/demos/ in the Firefox Android version 90.1.1 build 2015820751 on Android 8.1 and nothing happens; meaning that the datalist dropdown list does not appear at all. I tried in the same version of Firefox but for linux desktop, and it works (well the html5 datalist works so i do not know if it is the default behaviour of if it is your code).
Regards.

The other browsers actually focus the input field after the selection of a suggestion within the related datalist element. This even also prevents a current bug, that you'll reopen the datalist suggestions on trying to tab after a suggestion has been chosen.

It's even also already aligned with Microsoft that both IE11+ and EDGE are missing to "search both the value and label, using substring matching; currently it searches both the value and label, but uses prefix matching"
source: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9573654/

I tried to use datalist-polyfill, but I am getting this error when clicking in a field with a datalist, and nothing is displayed when I type some characters:
TypeError: undefined is not an object (evaluating 'i.setAttributeNode')
The markup is dynamically created with simple DOM methods. It works fine in non-Safari browsers. I tested with WebKit-based browser Epiphany.
<p><datalist id="nml_itemized_categories_datalist"><option value="..."></option>[many other options here]</datalist><input id="nml_itemized_categories_add_input" size="30" class="form-control" list="nml_itemized_categories_datalist"></p>
It looks like the polyfill is supposed to create a select inside dataset (from what I can see in the demo, which works), but that select element is never created, and I don't see any error message about it.

This is a very useful js component. I'm glad you made it pure JS (no third party required). Thank you.

One thing I really need from this component is input validation against the given data when it's out of focus or before form submission. I mean the text input would only accept empty value or correct values, otherwise it would display an error message and refuse to submit the form. It acts as if it's a select input.

Hope it will be added soon.

Thank you.

When trying to use this in Safari 12.3, I get the following error: [Error] TypeError: The HTMLInputElement.list getter can only be used on instances of HTMLInputElement.

It's pointing to this line constructor.prototype.list === undefined.

  // Emulate the two properties regarding the datalist and input elements
  // list property / https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement
  (function(constructor) {
    if (
      constructor &&
      constructor.prototype &&
      constructor.prototype.list === undefined
    ) {

The solution was to use WKWebView instead of UIWebView since it supports datalist. However, it's to note that this polyfill could be extended to work for all versions of Safari.

Originally posted by @jscho13 in #47 (comment)

Hello, @mfranzke !

First of all, thanks for the great job!

I realized that the file called datalist-polyfill.min.js is actually just a file without the development comments, instead of being a real 'Minified', which usually also doesn't contain the indentation.

Is there a reason for that? or is it really a mistake?

Hi,
At first place thanks for great work.

I found issue, even if it is not directly related with this polyfill, in Safari in case where you have included some external css libs. Safari show select box under the text field, so it wasn't look good. After some time spent on debugging and investigation I found that actually it just not hide select box like it do on jsfiddle examples for this polyfill.
Fast fix, that could save time to someone with similar issue is to add this line of in css:
select[hidden] { display: none; }

I hope this would be helpful to someone.

p.s. I also thought that it would be more user friendly if in Safari on click to input field show list automatically, without need to use arrows, so I adjusted code to that. If you think it is something which could be common I can make PR with my changes?

Thanks again for great work.

As Safari is not the only browser lacking support for datalist, it would be usable to indicate in README that this polyfill is not IE 9.0 compliant (at least out of the box).

@wlekin mentioned within the other ticket #12 : "not working on safari/chrome in ios 11.3, the select box float under the input box... i cant even type on your demo..."

When I access the value attribute on the option I receive "###[P0LYFlLLed]###" inserted between my value. and my

My value strings contain commas which may be the reason this is being split and concatenated.

The data attribute 'data-originalvalue' is being set to the value, resulting in inconsistent behavior between IE and the rest of the browsers I support.

Will this polyfill work with react? If so, how can it be implemented in a component? I'd love some help, please!

Thank you for a great polyfill!

Console	About WevView

Feature detection from datalist-polyfill.js file:

19 // Feature detection - let's break here, if it's even already supported
20 if (
21	'list' in dcmnt.createElement('input') &&
22	Boolean(dcmnt.createElement('datalist') && window.HTMLDataListElement)
23 ) {
24	return false;
25 }

Also tested on WebView-based app on real devices:

• Google Pixel 2
• Google Pixel
• Google Pixel XL
• Moto G4 Play
• Moto G3

Suggestions being clicked on wouldn‘t get inserted into the input any more.

I fire a change event on my input with datalist. In Chrome and Edge (native behaviour), it fire the event as soon as I press enter on an item. With the polyfill (in Firefox) the item is set to the input on enter, which means I need to press enter one more time in order for the event to fire.

I tried to run the corresponding demo to this library on a Safari brower on my mac but this did not work. https://mfranzke.github.io/datalist-polyfill/demos/ Is the data list still working on safari? I implemented this in my project but this also did not work.

If there is no list attribute, or if there is no element with that ID, or if the first element with that ID is not a datalist element, then there is no suggestions source element.
Source: https://html.spec.whatwg.org/multipage/input.html#the-list-attribute

especially for this kind of feature, you sometimes want to create the datalist element with javascript, after the initial page rendering. it would be very useful, if one could rerun the polyfill after datalist creation, to apply the polyfill to the new element. in the current form the polyfill script runs once, when included and does not run again when new datalist elements are being created.

On number fields Safari (as well as others) provides the possibility to in-/decrease it's numbers value by using the top & down arrow keys. The polyfill interferes with this behaviour by focusing the polyfilling select.

If appropriate, the user agent should use the suggestion's label and value to identify the suggestion to the user.

source: https://html.spec.whatwg.org/multipage/input.html#the-list-attribute

It would be nice if the polyfill supported option labels like these:
<option value="1" label="1: Müller"/>
These are only shown in the dropdown list, not in the input's value.

I am looking to use datalist-polyfill with an autosubmit function (the input element onchange event invokes this.form.submit().

In Safari, when I click on the required entry in the select list, the partial entry in the input element gets submitted rather than the selected entry from the select list.

Example: www.movable-type.co.uk/dev/datalist-polyfill/auto-submit.html – type 'c' and select 'Cat' from the list; in Chrome, it submits value 'Cat', in Safari, the polyfill submits value 'c'.

Can you fix this, or do you have a workaround?

Hi, thank you for the project.

Unfortunately it doesn't render the input properly on mobile safari, here's the screenshot.

Screenshot made from browserstack (os=iOS&os_version=9.0&device=iPhone+6S&device_browser=safari).

The users input needs to get escaped for the enhanced functionality regarding IE11+ and EDGE that was introduced by #39

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency xo to ^0.58.0
• chore(deps): update dependency husky to v9

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency npm-run-all with npm-run-all2 ^5.0.0
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency np to v10
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency pretty-quick to v4
• chore(deps): update github/super-linter action to v6
• chore(deps): update webdriverio monorepo to v8 (major) (@wdio/cli, @wdio/local-runner, webdriverio)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

By using .type and .multiple properties directly, IE9 would respond incorrectly, as those values for newer HTML5 type values and multiple attribute aren't supported natively.

This is related to the even already existing enhancement by #39 and should enhance this polyfill to even also support the lookup and inserting of multiple emailadresses on the related input field.

EDGE doesn't trigger the input event any more after selecting an item via mouseclick, even though that IE11 still did, nevermind ...

That for the optimizations on substring matching for EDGE specifically by #39 need to get restricted to input[type="text"] elements even only.

While focusing the suggestions select and pressing keys other browsers would behave like this:

• Tab key: The currently focused option/suggestion would get inserted into the input previously to focusing the upfollowing focusable element.
• On pressing a printable character key its character would get inserted into the input as well as focusing it.

I'm using view-js and bootstrap (just css).
Installed with npm install datalist-polyfill --save. Imported in main.js as import datalist from "datalist-polyfill".

This screenshot was made in Safari on OSX, the same behaviour is on mobile Safari.

P.S.: jsfiddle

Thanks for all the effort.

In datalist it's currently not possible to differentiate option's value from text (probably because you can enter free text)
However, it is very useful for some. So, I thought perhaps accessing the selected option - if there is one - is a simpler solution that will allow accessing to the element data (like data-id='x').

What do you think?

Depending on the enhancements by #36 as well as #39 there's a JavaScript error in IE9.

The list IDL attribute must return the current suggestions source element, if any, or null otherwise.

The suggestions source element is the first element in the document in tree order to have an ID equal to the value of the list attribute, if that element is a datalist element. If there is no list attribute, or if there is no element with that ID, or if the first element with that ID is not a datalist element, then there is no suggestions source element.

source: https://www.w3.org/TR/html5/sec-forms.html#dom-htmlinputelement-list

Related to the bug that I've raised at Microsoft the polyfill should support fixing the datalist popup getting emptied on focusing the input field via tab in Microsoft EDGE, compare to this screenshot:

Description

When entering multiple entries on Input type email, the first character of the first e-mail is changed. The activity is different each time you try to reproduce it.

Expected outcome

• The selected e-mail appears
• The previous inputs stay the same

Actual outcome

• The selected e-mail appears
• First character of first e-mail changes

Live Demo

The default jsfiddle demo provided

Steps to reproduce

1. Select an e-mail
2. Type comma
3. Select a second e-mail

Hi

Edge datalist implementation is buggy (practically not working) - can the polyfill be enabled for Edge too?
Tried to remove the check at the beginning of the screen, but it doesn't seem to solve the problem.

Thanks

On Safari when choosing value from polyfilled datalist using keyboard, picking value with ENTER key submits the form.

Safari version: 12.0.2 (14606.3.4)

The spec defines within one of the examples:

Note how the user agent is using the knowledge that the values are URLs to allow the user to omit the scheme part and perform intelligent matching on the domain name.

It doesn't work properly on iOS when nesting the elements within the label element.

This is the code

<label for="text-field">
  From <span aria-hidden="true">*</span>
  <input id="text-field" type="text" class="" placeholder="Departure airport" value="" list="airports" required aria-required="true">
  <datalist id="airports" title="Choose an aiport">
      <option value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
      <option value="Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)">
      <option value="Roma, Fiumicino [FCO] (ITALIA)">
      <option value="New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)">
      <option value="Parigi, Charles De Gaulle [CDG] (FRANCIA)">
      <option value="Berlino, Schoenefeld [SXF] (GERMANIA)">
      <option value="Londra, Heathrow [LHR] (REGNO UNITO)">
  </datalist>
</label>

I noticed that the select appears behind the keyboard, but if I put the datalist out of label it works.
Ok I tried to modify the markup also on the demo page and I confirm you that if datalist is inside label (and for my needs I have to do in this way), it doesn't work.

Any suggestions?

JS Bin: https://output.jsbin.com/solopuq

Originally posted by @acespace90 in #43 (comment)

Hi mfranzke,

I am trying to dynamic the datalist by ajax when user keyup the input textbox, i hope old data able to clear first then append new data into datalist, but safari seems like facing issue, it would not display dropdownlist when i put dataList.innerHTML = '';

below is my sample code, hope can get your advice, Thanks alot.

<h2>Basis</h2>

<fieldset>
	<legend>This is dynamic option</legend>

	<label for="animal">Animal:</label>
	<input type="text" name="animal" id="animal" value="" list="animallist" onkeyup="dynamic()">
	<datalist id="animallist" title="Choose a suggestion"></datalist>
</fieldset>


<script>
	function dynamic() {
		var dataList = document.getElementById('animallist');
	    var x = document.getElementById("animal");
	    var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
		    if (this.readyState == 4 && this.status == 200) {
		     	var json = JSON.parse(this.responseText);
		     	var item = json.items;
		     	dataList.innerHTML = '';

				for (i = 0; i < item.length; i++) {
					// Create a new <option> element.
					
	                var option = document.createElement('option');
	                // Set the value using the item in the JSON array.
	                option.value = item[i].name;
	                // Add the <option> element to the <datalist>.
	                dataList.appendChild(option);
				}

		    }
		};
		xhttp.open("GET", "http://192.168.1.1/animal/search_animals/" + x.value, true);
		xhttp.send();
	    
	}
</script>
<script type="text/javascript" src="datalist-polyfill.js"></script>

Hi

Is there an option to hide the option value when the selectbox is open? I want to show the inner text, and get the value on select

I have spaces in my datalist.

option1
    option2
    option3
option4

It shows like this with polyfill.

option1
option2
option3
option4

Maybe convert spaces to  

Thanks @mfranzke for an awesome library.

The only unfortunate thing I've encountered so far is that the minified JS file appears to include your code comments. According to my tests, this approximately doubles the size of the minified JS file.

I thought I would take a stab at resolving this myself through a PR, but, after reviewing the code, it is unclear to me how the datalist-polyfill.min.js file is being produced (build tool, minifier, config settings, etc.). If you wanted to shed some light on that, I would be glad to take on this effort. Otherwise, I would just be glad to see the update!

Thanks in advance.