|Views Total:||517 views|
|Official Page:||Go to website|
|Last Update:||May 22, 2021|
This is an HTML <datalist> tag Polyfill to provide the accessible datalist functionality on those browsers that don’t support it.
How to use it:
Assume that you have a dropdown list with with pre-defined values as this:
<datalist id="animallist" title="Suggestions to choose from"> <option value="Cat"> <option value="Cow"> <option value="Dog"> <option value="Horse"> <option value="Lion"> <option value="Pig" disabled> <option value="Zebra"> </datalist>
- fixed to have a “correct” minification
- No substring matching for multiple emailadress suggestions in IE10+ and EDGE
- Prevent the form to be submitted on selecting a value via ENTER key within the select
- Microsoft EDGE / datalist popups get “emptied” when receiving focus via tabbing
- Fixed: TypeError: undefined is not an object (evaluating ‘i.setAttributeNode’)
- using both suggestions label and value to identify the suggestion to the user
- Finally integrated the test regarding clicking the selects option elements, as this was actually previously prevented by the other bug fixed in the previous release
- code and complexity simplifications
- Code simplifications
- Fixed: Suggestions aren‘t working onclick any more
- Dispatch the input event as well on the related input[list] on using the Backspace key within the polyfilling select
- Defined the system-font for the demo-page
- Renamed some variables to some more meaningful names
- Cleanup on some unnecessary variables & comments
- Removed an old separation in between eventTarget-Tagnames of select and option, that was integrated due to the mouse-event, which has been replaced again a while ago
- Include behavior on pressing Tab or other printable keys
- Fixed a bug that lead to an incorrectly selected suggestion (first instead of last) while using the up key on the input element
- Fix for input[list] elements with class attribute – thanks to @mricherzhagen for mentioning this and even also providing a solution
- Made a lot of code changes in relation to what the previously mentioned linters reported.
- Made some code changes in relation to what the previously mentioned linters reported.
- Fixed For IE9: After choosing a suggestion out of the polyfilling select, the select itself wouldn’t get hidden.
- Changed the order in a comparison as this simplifies the response.
- Hiding the polyfilling select on pressing ENTER, which is equal to the behavior on typing ESC.
- Made some necessary changes to enhance the current demo page by the minimum amount of relevant HTML tags that should be included within every page (and even also added the IE related meta tag due to backward compatibility).
- Removed some sample code out of the readme page due to the new NPM websites layout.
- Added MutationObserver to even also capture changes to the option elements as a correction to enhance the current functionality.
- Changed some URLs from HTTP to the new kid on the block: HTTPS.
- Additionally did some necessary updates to the documentation.
- Focusing the input[list] after selecting a suggestion
- Some code refactoring