datalist-polyfill - npm Package Compare versions

Comparing version 1.24.4 to 1.25.0

CHANGELOG.md

@@ -14,2 +14,27 @@ # Changelog
 
+## [1.25.0] - 2022-05-16
+
+### Added
+
+- npm scripts for easier releasing
+- test: `html-validate` for testing
+- code conventions file [#76](https://github.com/mfranzke/loading-attribute-polyfill/issues/76)
+- test: CodeQL
+- Recommended VS Code extensions
+- test: Super linter
+- build: CI/CD workflows / actions
+- renovate for Dependency updates
+- feature detection result shown on the demo page
+- financial contributors to the README ([#82](https://github.com/mfranzke/loading-attribute-polyfill/issues/82))
+
+### Changed
+
+- optimized documentation
+- updated `devDependencies`
+- optimized build process
+- `.gitignore` file according to githubs default content
+- manifested to use Node 14 for the moment dependening on Webdriver.io
+- default branch name from `master` to `main`
+- replaced dependencies badge
+
 ## [1.24.4] - 2020-05-23
@@ -33,7 +58,7 @@
 
-- Updated webdriverio and prettier dependencies
+- Updated `webdriverio` and `prettier` dependencies
 
 ### Fixed
 
-- build: \*.min.js files should't get prettified
+- build: `*.min.js` files should't get prettified
 
@@ -44,3 +69,3 @@ ## [1.24.2] - 2020-03-19
 
-- improvement(prettier): run prettier when committing files
+- improvement(prettier): run `prettier` when committing files
 - a minzipped size badge
@@ -50,6 +75,6 @@
 
-- Updated webdriverio dependency
+- Updated `webdriverio` dependency
 - improvement(prettier): prettified and optimized the file
 - Formatting and code & content optimizations
-- xo: added further rules for IE9 & IE10 compatibility
+- `xo`: added further rules for IE9 & IE10 compatibility
 
@@ -60,3 +85,3 @@ ## [1.24.1] - 2020-03-15
 
-- Updated webdriverio, commitlint, husky, prettier and xo dependencies
+- Updated `webdriverio`, `commitlint`, `husky`, `prettier` and `xo` dependencies
 - test(xo): specifying the JS filename explicitly
@@ -68,3 +93,3 @@ - build the minified JS file again
 - Corrected some metadata regarding the packages
-- build(packages): corrected metadata regarding files to ignore and updated bower.json
+- build(packages): corrected metadata regarding files to ignore and updated `bower.json`
 
@@ -75,14 +100,14 @@ ## [1.24.0] - 2020-02-26
 
-- Linking Apples changelog on the datalist feature to our readme
-- gitignore file
+- Linking Apples changelog on the datalist feature from our readme
+- `.gitignore` file
 - Docs: further mentioned IE10+ and EDGE specifics
-- .npmignore file
-- Commitlint & husky for CI
+- `.npmignore` file
+- `Commitlint` & `husky` for CI
 
 ### Changed
 
-- Updated webdriverio and xo dependencies
+- Updated `webdriverio` and `xo` dependencies
 - Reformatted the JS code
-- Removed pointless loop in the code PR #GH-61
-- Updated docs regarding browser support #GH-62
+- Removed pointless loop in the code PR [#61](https://github.com/mfranzke/datalist-polyfill/issues/61)
+- Updated docs regarding browser support [#62](https://github.com/mfranzke/datalist-polyfill/issues/62)
 
@@ -92,4 +117,4 @@ ### Fixed
 - Docs: filesize in the readme
-- fixed to have a "correct" minification #GH-58
-- Fix exception in IE9 emulator mode PR #GH-65
+- fixed to have a "correct" minification [#58](https://github.com/mfranzke/datalist-polyfill/issues/58)
+- Fix exception in IE9 emulator mode PR [#65](https://github.com/mfranzke/datalist-polyfill/issues/65)
 - Badges displaying problems in some readers / compilers
@@ -102,9 +127,9 @@ - Docs: optimizing on the typos and clearity
 
-- update xo to version 0.24.0
+- update `xo` to version 0.24.0
 
 ### Fixed
 
-- No substring matching for multiple emailadress suggestions in IE10+ and EDGE / #GH-54
-- EDGE: Incorrect handling of non-text input fields / #GH-55
-- IE10: Changes by #39 break script execution due to usage of .dataset / #GH-56
+- No substring matching for multiple emailadress suggestions in IE10+ and EDGE / [#54](https://github.com/mfranzke/datalist-polyfill/issues/54)
+- EDGE: Incorrect handling of non-text input fields / [#55](https://github.com/mfranzke/datalist-polyfill/issues/55)
+- IE10: Changes by [#39](https://github.com/mfranzke/datalist-polyfill/issues/39) break script execution due to usage of `.dataset` / [#56](https://github.com/mfranzke/datalist-polyfill/issues/56)
 - Some simple corrections, like e.g. removing incorrectly set `multiple` attributes
@@ -116,3 +141,3 @@
 
-- Prevent the form to be submitted on selecting a value via ENTER key within the select / #GH-51
+- Prevent the form to be submitted on selecting a value via `ENTER` key within the `select` / [#51](https://github.com/mfranzke/datalist-polyfill/issues/51)
 
@@ -123,3 +148,3 @@ ## [1.23.1] - 2019-01-07
 
-- JavaScript bug in IE9 and corrected the handling of the browsers towards IE10+ / #GH-50
+- JavaScript bug in IE9 and corrected the handling of the browsers towards IE10+ / [#50](https://github.com/mfranzke/datalist-polyfill/issues/50)
 
@@ -130,10 +155,10 @@ ## [1.23.0] - 2019-01-05
 
-- Microsoft EDGE / datalist popups get "emptied" when receiving focus via tabbing / #GH-49
+- Microsoft EDGE / `datalist` popups get "emptied" when receiving focus via tabbing / [#49](https://github.com/mfranzke/datalist-polyfill/issues/49)
 
 ### Changed
 
-- Updated webdriver.io testing framework to version 5
+- Updated `webdriver.io` testing framework to version 5
 - Updated some aspects within the `README` file as well as announced some upcoming bigger changes regarding and to cheer the recognized basic support of `datalist` elements within Apple Safari browser.
 - Refactoring to prevent a „Function has a complexity of 21.“
-- Some simple reformatting of the code according to prettier
+- Some simple reformatting of the code according to `prettier`
 
@@ -144,7 +169,7 @@ ## [1.22.2] - 2018-11-03
 
-- Added comment regarding the structure of the HTML code / #GH-44 & #GH-45
+- Added comment regarding the structure of the HTML code / [#44](https://github.com/mfranzke/datalist-polyfill/issues/44) & [#45](https://github.com/mfranzke/datalist-polyfill/issues/45)
 
 ### Fixed
 
-- Preventing a JS error on no `type`-attribute being provided for the `input`-element / #GH-45
+- Preventing a JS error on no `type`-attribute being provided for the `input`-element / [#45](https://github.com/mfranzke/datalist-polyfill/issues/45)
 
@@ -155,3 +180,3 @@ ## [1.22.1] - 2018-08-27
 
-- Escaping the user inputs value as doublequotes wouldn't work on the newly added IE11+ and EDGE functionality / #GH-40
+- Escaping the user inputs value as doublequotes wouldn't work on the newly added IE11+ and EDGE functionality / [#40](https://github.com/mfranzke/datalist-polyfill/issues/40)
 
@@ -162,3 +187,3 @@ ## [1.22.0] - 2018-08-27
 
-- Substring matching for the suggestions on both the `value` and the `text` values / #GH-36
+- Substring matching for the suggestions on both the `value` and the `text` values / [#36](https://github.com/mfranzke/datalist-polyfill/issues/36)
 
@@ -173,3 +198,3 @@ ## [1.21.2] - 2018-08-11
 
-- Corrected the code style of the README file again, as this got incorrectly reformatted previously
+- Corrected the code style of the `README` file again, as this got incorrectly reformatted previously
 
@@ -180,3 +205,3 @@ ## [1.21.1] - 2018-08-09
 
-- Suggestions aren‘t working onClick any more (#GH-35)
+- Suggestions aren‘t working `onClick` any more ([#35](https://github.com/mfranzke/datalist-polyfill/issues/35))
 
@@ -187,3 +212,3 @@ ## [1.21.0] - 2018-08-08
 
-- Added testcases and added [crossbrowsertesting](https://crossbrowsertesting.com/) logo to README
+- Added testcases and added [crossbrowsertesting](https://crossbrowsertesting.com/) logo to `README`
 
@@ -200,3 +225,3 @@ ### Changed
 
-- Arrow keys (top&down) disturb the general browser behaviour on number fields (#GH-32)
+- Arrow keys (top&down) disturb the general browser behaviour on number fields ([#32](https://github.com/mfranzke/datalist-polyfill/issues/32))
 
@@ -211,3 +236,3 @@ ## [1.20.1] - 2018-07-20
 
-- Suggestions aren‘t working onclick any more #GH-31
+- Suggestions aren‘t working `onclick` any more [#31](https://github.com/mfranzke/datalist-polyfill/issues/31)
 
@@ -218,3 +243,3 @@ ## [1.20.0] - 2018-07-18
 
-- on `input[type=url]` omitting the scheme part and performing intelligent matching on the domain name (#GH-28)
+- on `input[type=url]` omitting the scheme part and performing intelligent matching on the domain name ([#28](https://github.com/mfranzke/datalist-polyfill/issues/28))
 - README: Updated the tested browsers list as well as updated the Features section due to the updates by this release
@@ -225,4 +250,4 @@ - Preparation for automated testing / splitting the demo page by regular and IE9
 
-- IE9: Use .getAttribute for retrieving .type and .multiple values/existance (#GH-29)
-- list IDL attribute must return the current suggestions source element (#GH-30)
+- IE9: Use `.getAttribute` for retrieving `.type` and `.multiple` values/existance ([#29](https://github.com/mfranzke/datalist-polyfill/issues/29))
+- list IDL attribute must return the current suggestions source element ([#30](https://github.com/mfranzke/datalist-polyfill/issues/30))
 
@@ -239,3 +264,3 @@ ## [1.19.0] - 2018-07-13
 - Preparation for some automated testing
-- Changed and added some functionality to the description within the README file
+- Changed and added some functionality to the description within the `README` file
 
@@ -246,3 +271,3 @@ ## [1.18.1] - 2018-07-10
 
-- Dispatch the input event as well on the related `input[list]` on using the Backspace key within the polyfilling select
+- Dispatch the input event as well on the related `input[list]` on using the `Backspace` key within the polyfilling `select`
 
@@ -259,3 +284,3 @@ ## [1.18.0] - 2018-07-10
 
-- 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
+- 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
 
@@ -266,3 +291,3 @@ ## [1.17.0] - 2018-07-07
 
-- Include behavior on pressing Tab or other printable keys (#GH-#27)
+- Include behavior on pressing `Tab` or other printable keys ([#27](https://github.com/mfranzke/datalist-polyfill/issues/27))
 - Added Greenkeeper badge. I'm using this service to keep being updated on the dev dependencies.
@@ -274,4 +299,4 @@
 
-- 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 by pull request #GH-25
+- 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 by pull request [#25](https://github.com/mfranzke/datalist-polyfill/issues/25)
 
@@ -282,3 +307,3 @@ ## [1.16.1] - 2018-06-28
 
-- Introduced a new bug by the fix for #GH-23. Reverted that one and corrected the ESLint rules settings. (#GH-24)
+- Introduced a new bug by the fix for [#23](https://github.com/mfranzke/datalist-polyfill/issues/23). Reverted that one and corrected the `ESLint` rules settings. ([#24](https://github.com/mfranzke/datalist-polyfill/issues/24))
 
@@ -289,3 +314,3 @@ ## [1.16.0] - 2018-06-27
 
-- Linting as well as security: prettier, xo, codacy
+- Linting as well as security: `prettier`, `xo`, `codacy`
 - And their badges
@@ -295,7 +320,7 @@
 
-Made a lot of code changes in relation to what the previously mentioned linters reported. (e.g. #GH-23)
+Made a lot of code changes in relation to what the previously mentioned linters reported. (e.g. [#23](https://github.com/mfranzke/datalist-polyfill/issues/23))
 
 ### Security
 
-Made some code changes in relation to what the previously mentioned linters reported. (e.g. #GH-21, #GH-22)
+Made some code changes in relation to what the previously mentioned linters reported. (e.g. [#21](https://github.com/mfranzke/datalist-polyfill/issues/21), [#22](https://github.com/mfranzke/datalist-polyfill/issues/22))
 
@@ -306,3 +331,3 @@ ## [1.15.1] - 2018-06-22
 
-- A previous checkin has broken the solution provided for #GH-16, so I've fixed this again.
+- A previous checkin has broken the solution provided for [#16](https://github.com/mfranzke/datalist-polyfill/issues/16), so I've fixed this again.
 
@@ -319,3 +344,3 @@ ## [1.15.0] - 2018-06-22
 
-- IE9: After choosing a suggestion out of the polyfilling select, the select itself wouldn't get hidden. (#GH-19)
+- IE9: After choosing a suggestion out of the polyfilling select, the select itself wouldn't get hidden. ([#19](https://github.com/mfranzke/datalist-polyfill/issues/19))
 
@@ -336,3 +361,3 @@ ## [1.14.3] - 2018-06-20
 
-- A small bug sadly slipped through that doesn't hide the polyfilling select on non-matching option elements regarding the value.
+- A small bug sadly slipped through that doesn't hide the polyfilling `select` on non-matching option elements regarding the value.
 
@@ -343,16 +368,16 @@ ## [1.14.1] - 2018-06-20
 
-- Hiding the polyfilling select on pressing ENTER, which is equal to the behavior on typing ESC.
-- Added more badges to the readme. I'm loving badges.
+- Hiding the polyfilling `select` on pressing `ENTER`, which is equal to the behavior on pressing `ESC`.
+- Added more badges to the `README`. I'm loving badges.
 
 ### Changed
 
-- 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 backwards compatibility).
+- 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 backwards compatibility).
 
 ### Removed
 
-- Removed some sample code out of the readme page due to the new NPM websites layout.
+- Removed some sample code out of the `README` page due to the new `NPM` websites layout.
 
 ### Fixed
 
-- The determination of option elements within the polyfilling select has incorrectly even also included `:disabled` elements.
+- The determination of `option` elements within the polyfilling `select` has incorrectly even also included `:disabled` elements.
 
@@ -363,7 +388,7 @@ ## [1.14.0] - 2018-06-12
 
-- Added MutationObserver to even also capture changes to the option elements as a correction to enhance the current functionality (#GH-16).
+- Added `MutationObserver` to even also capture changes to the `option` elements as a correction to enhance the current functionality ([#16](https://github.com/mfranzke/datalist-polyfill/issues/16)).
 
 ### Changed
 
-- Changed some URLs from HTTP to the new kid on the block: HTTPS. Nice ! ;-)
+- Changed some URLs from `HTTP` to the new kid on the block: `HTTPS`. Nice ! ;-)
 - Additionally did some necessary updates to the documentation.
@@ -375,3 +400,3 @@
 
-- Focusing the input[list] after selecting a suggestion, as in #GH-18
+- Focusing the `input[list]` after selecting a suggestion, as in [#18](https://github.com/mfranzke/datalist-polyfill/issues/18)
 
@@ -389,8 +414,8 @@ ## [1.13.1] - 2018-06-04
 
-- Thanks to @eddr and @Kravimir for inspiring me via #GH-5 that there should be another possibility on defining value and label for the suggestions. As the browser vendors (GC vs. the others) don't seem to be aligned on this topic, I've decided to enable the label-attribute to serve as the definitive label being displayed, even if a value is being defined differing from the label. Check out the „Different ways of defining an option“ section on the demo page regarding this topic.
+- Thanks to @eddr and @Kravimir for inspiring me via [#5](https://github.com/mfranzke/datalist-polyfill/issues/5) that there should be another possibility on defining `value` and `label` for the suggestions. As the browser vendors (GC vs. the others) don't seem to be aligned on this topic, I've decided to enable the `label`-attribute to serve as the definitive label being displayed, even if a value is being defined differing from the label. Check out the „Different ways of defining an option“ section on the demo page regarding this topic.
 
 ### Changed
 
-- The docs. And changed (dependencies) and added (jsdelivr) badges. I like badges.
-- As well as extracted the CHANGELOG to an external file.
+- The docs. And changed (`dependencies`) and added (`jsdelivr`) badges. I like badges.
+- As well as extracted the `CHANGELOG` to an external file.
 
@@ -401,3 +426,3 @@ ## [1.12.3] - 2018-05-04
 
-- @wlekin thankfully mentioned (extracted to #GH-15) that the polyfilling `select` gets positioned incorrectly underneath the `input[list]` element on iOS.
+- @wlekin thankfully mentioned (extracted to [#15](https://github.com/mfranzke/datalist-polyfill/issues/15)) that the polyfilling `select` gets positioned incorrectly underneath the `input[list]` element on iOS.
 
@@ -408,3 +433,3 @@ ## [1.12.2] - 2018-05-01
 
-- Thank you @IceCreamYou for fixing the case sensitive focusOut -> focusout event name
+- Thank you @IceCreamYou for fixing the case sensitive `focusOut` -> `focusout` event name
 
@@ -415,3 +440,3 @@ ## [1.12.1] - 2018-04-07
 
-- simple (code) style changes (plus added editorconfig to keep it that way) and typo
+- simple (code) style changes (plus added `.editorconfig` to keep it that way) and typo
 
@@ -422,3 +447,3 @@ ## [1.12.0] - 2018-03-18
 
-- @ottoville thankfully contributed by mentioning and implementing the feature of emitting an event when item in datalist is selected
+- @ottoville thankfully contributed by mentioning and implementing the feature of emitting an event when item in `datalist` is selected
 
@@ -437,3 +462,3 @@ ## [1.11.2] - 2018-03-17
 
-- @hryamzik thankfully mentioned by #GH-7 that the polyfilling `select` gets positioned incorrectly in case of the `input[list]` element being styled as a block-level element.
+- @hryamzik thankfully mentioned by [#7](https://github.com/mfranzke/datalist-polyfill/issues/7) that the polyfilling `select` gets positioned incorrectly in case of the `input[list]` element being styled as a block-level element.
 
@@ -444,3 +469,3 @@ ## [1.11.0] - 2017-10-08
 
-- I'm very thankful for @ailintom mentioning the missing IE9 support with #GH-2, which is still relevant (at least and maybe foremost) for the Windows Vista users.
+- I'm very thankful for @ailintom mentioning the missing IE9 support with [#2](https://github.com/mfranzke/datalist-polyfill/issues/2), which is still relevant (at least and maybe foremost) for the Windows Vista users.
 - Additionally @Kravimir thankfully brought to my attention, that IE9 handles the `option` subelements quite restricted - so I've added a section regarding IE9 support to the demo page with the additional two lines of HTML, that you'll need to add in case you also need / want to still support IE9 in your projects, as well as changed the JavaScript code to even also support IE9.
@@ -490,3 +515,3 @@
 
-- Restricted the polyfill to only work with relevant input types; we’d like to exclude the ones that even already need another polyfill to „work“ correctly or have a meaningful UI, like e.g. color or date-related ones, as those polyfills should handle the support of the datalist themselves depending on their own functionality.
+- Restricted the polyfill to only work with relevant input types; we’d like to exclude the ones that even already need another polyfill to „work“ correctly or have a meaningful UI, like e.g. `color` or `date`-related ones, as those polyfills should handle the support of the datalist themselves depending on their own functionality.
 
@@ -509,3 +534,3 @@ ## [1.7.0] - 2017-06-29
 
-- Introduced speaking variables for the different keycodes.
+- Introduced speaking variables for the different `keycodes`.
 - And implemented some feedback by flow.
@@ -520,4 +545,4 @@ - As well as additional code simplifications.
 
-- Depending of the feedback by Michael the visual appearance has changed and will better emulate the expected layout as in other browsers (on non-touch interactions). That for the script is creating the polyfilling select as a multiple-selection type, which emulates the expected „form“ better.
-- And better positioning as well as styling the polyfilling select according to the input field, like e.g. even also set the polyfilling selects border-radius equally as the one by the polyfilled input.
+- Depending of the feedback by Michael the visual appearance has changed and will better emulate the expected layout as in other browsers (on non-touch interactions). That for the script is creating the polyfilling `select` as a `multiple`-selection type, which emulates the expected „form“ better.
+- And better positioning as well as styling the polyfilling `select` according to the `input` field, like e.g. even also set the polyfilling `select` elements `border-radius` equally as the one by the polyfilled `input`.
 
@@ -534,3 +559,3 @@ ## [1.5.0] - 2017-06-10
 
-- Added RTL text-direction support
+- Added `RTL` text-direction support
 
@@ -557,3 +582,3 @@ ## [1.3.0] - 2017-05-30
 
-- Added .options (for `datalist` elements) and .list (for `input` elements) properties according to the specs.
+- Added `.options` (for `datalist` elements) and `.list` (for `input` elements) properties according to the specs.
 
@@ -583,3 +608,3 @@ ## [1.1.2] - 2017-05-22
 
-- better preselection on entries within the dropdown depending on the inputs value
+- better preselection on entries within the dropdown depending on the `input` elements value
 
@@ -586,0 +611,0 @@ ## [1.0.2] - 2017-05-08

datalist-polyfill.js

@@ -27,3 +27,3 @@ /*
 		// And adapted out of https://gist.github.com/gaboratorium/25f08b76eb82b1e7b91b01a0448f8b1d :
-		isGteIE10 = Boolean(ua.match(/MSIE\s1[01]./) || ua.match(/rv:11./)),
+		isGteIE10 = Boolean(/MSIE\s1[01]./.test(ua) || /rv:11./.test(ua)),
 		isEDGE = Boolean(ua.indexOf('Edge/') !== -1);
@@ -55,3 +55,3 @@
 		classNameInput = 'polyfilled',
-		classNamePolyfillingSelect = 'polyfilling',
+		classNamePolyfillingSelect = '.polyfilling',
 		// Defining a most likely unique polyfill string
@@ -91,2 +91,3 @@ uniquePolyfillString = '###[P0LYFlLLed]###';
 				var input = dcmnt.querySelector(
+					// eslint-disable-next-line prettier/prettier
 					'input[list="' + datalistNeedsAnUpdate.id + '"]'
@@ -99,5 +100,4 @@ );
 						prepOptions(datalistNeedsAnUpdate, input).length,
-						datalistNeedsAnUpdate.getElementsByClassName(
-							classNamePolyfillingSelect
-						)[0]
+						// eslint-disable-next-line prettier/prettier
+						datalistNeedsAnUpdate.querySelector(classNamePolyfillingSelect)
 					);
@@ -143,3 +143,3 @@ }
 			datalistSelect =
-				datalist.getElementsByClassName(classNamePolyfillingSelect)[0] ||
+				datalist.querySelector(classNamePolyfillingSelect) ||
 				setUpPolyfillingSelect(input, datalist);
@@ -229,2 +229,3 @@
 				getInputValue(input).replace(/\\([\s\S])|(")/g, '\\$1$2') +
+				// eslint-disable-next-line prettier/prettier
 				'"]'
@@ -254,2 +255,3 @@ );
 					(label && label.toLowerCase().indexOf(inptValue) !== -1) ||
+					// eslint-disable-next-line prettier/prettier
 					(text !== '' && text.indexOf(inptValue) !== -1))
@@ -284,2 +286,3 @@ );
 
+			// eslint-disable-next-line no-self-assign
 			firstOption.value = firstOption.value;
@@ -295,3 +298,3 @@ }
 			datalistSelect =
-				datalist.getElementsByClassName(classNamePolyfillingSelect)[0] ||
+				datalist.querySelector(classNamePolyfillingSelect) ||
 				setUpPolyfillingSelect(input, datalist),
@@ -385,3 +388,3 @@ // Either have the select set to the state to get displayed in case of that it would have been focused or because it's the target on the inputs blur - and check for general existance of any option as suggestions
 			datalistSelect =
-				datalist.getElementsByClassName(classNamePolyfillingSelect)[0] ||
+				datalist.querySelector(classNamePolyfillingSelect) ||
 				setUpPolyfillingSelect(input, datalist),
@@ -418,2 +421,3 @@ inputValue = getInputValue(input),
 							0,
+							// eslint-disable-next-line prettier/prettier
 							optionValue.length + textValueSeperator.length
@@ -453,3 +457,4 @@ ),
 		// Input the unused options as siblings next to the select - and differentiate in between the regular, and the IE9 fix syntax upfront
-		(datalist.getElementsByClassName('ie9_fix')[0] || datalist).appendChild(
+		(datalist.querySelectorAll('.ie9_fix')[0] || datalist).appendChild(
+			// eslint-disable-next-line prettier/prettier
 			disabledValues
@@ -460,3 +465,3 @@ );
 			obs.observe(datalist, {
-				childList: true
+				childList: true,
 			});
@@ -487,3 +492,3 @@ }
 		// Setting a class for easier identifying that select afterwards
-		datalistSelect.setAttribute('class', classNamePolyfillingSelect);
+		datalistSelect.setAttribute('class', classNamePolyfillingSelect.slice(1));
 
@@ -519,2 +524,3 @@ // Set general styling related definitions
 						parseFloat(inputStyles.getPropertyValue('margin-' + direction))) +
+					// eslint-disable-next-line prettier/prettier
 					'px'
@@ -528,5 +534,4 @@ );
 		// Set the polyfilling selects border-radius equally to the one by the polyfilled input
-		datalistSelect.style.borderRadius = inputStyles.getPropertyValue(
-			'border-radius'
-		);
+		datalistSelect.style.borderRadius =
+			inputStyles.getPropertyValue('border-radius');
 		datalistSelect.style.minWidth = rects[0].width + 'px';
@@ -651,3 +656,3 @@
 			evt = new Event('input', {
-				bubbles: true
+				bubbles: true,
 			});
@@ -688,3 +693,3 @@ } else {
 					*/
-					var element = dcmnt.getElementById(this.getAttribute('list'));
+					var element = dcmnt.querySelector('#' + this.getAttribute('list'));
 
@@ -697,3 +702,3 @@ return typeof this === 'object' &&
 						: null;
-				}
+				},
 			});
@@ -713,5 +718,5 @@ }
 					return typeof this === 'object' && this instanceof constructor
-						? this.getElementsByTagName('option')
+						? this.querySelectorAll('option')
 						: null;
-				}
+				},
 			});
@@ -718,0 +723,0 @@ }

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.24.4",
+  "version": "1.25.0",
   "description": "A minimal and dependency-free vanilla JavaScript datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.",
   "main": "datalist-polyfill.js",
   "scripts": {
-    "test": "xo datalist-polyfill.js"
+    "test": "run-p validate:* lint:*",
+    "validate:html": "html-validate demos",
+    "lint:xo": "xo datalist-polyfill.js",
+    "release": "np",
+    "prepare": "husky install"
   },
@@ -25,3 +29,4 @@ "repository": {
     "suggester",
-    "select"
+    "select",
+    "front-end"
   ],
@@ -31,31 +36,20 @@ "bugs": {
   },
-  "homepage": "https://github.com/mfranzke/datalist-polyfill",
-  "dependencies": {},
+  "homepage": "https://mfranzke.github.io/datalist-polyfill/demos/",
   "devDependencies": {
-    "@commitlint/cli": "^8.3.5",
-    "@commitlint/config-conventional": "^8.3.4",
-    "@wdio/cli": "^6.1.12",
-    "@wdio/dot-reporter": "^6.1.9",
-    "@wdio/local-runner": "^6.1.12",
-    "@wdio/mocha-framework": "^6.1.8",
-    "@wdio/sync": "^6.1.8",
-    "husky": "^4.2.5",
-    "prettier": "^2.0.5",
-    "pretty-quick": "^2.0.1",
-    "webdriverio": "^6.1.12",
-    "xo": "^0.30.0"
-  },
-  "xo": {
-    "envs": [
-      "browser"
-    ],
-    "prettier": true,
-    "esnext": false,
-    "rules": {
-      "one-var": 0,
-      "no-use-before-define": 0,
-      "unicorn/prefer-includes": 0,
-      "unicorn/prefer-dataset": 0
-    }
+    "@commitlint/cli": "^17.0.0",
+    "@commitlint/config-conventional": "^17.0.0",
+    "@wdio/cli": "^7.19.5",
+    "@wdio/dot-reporter": "^7.19.5",
+    "@wdio/local-runner": "^7.19.5",
+    "@wdio/mocha-framework": "^7.19.5",
+    "@wdio/sync": "^7.19.5",
+    "html-validate": "^7.0.0",
+    "husky": "^8.0.0",
+    "np": "^7.5.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.3.2",
+    "pretty-quick": "^3.1.1",
+    "webdriverio": "^7.19.5",
+    "xo": "^0.49.0"
   }
 }

README.md

 # datalist-polyfill
 
-[![MIT license](https://img.shields.io/npm/l/datalist-polyfill.svg "license badge")](https://opensource.org/licenses/mit-license.php)
+[![Financial Contributors on Open Collective](https://opencollective.com/datalist-polyfill/all/badge.svg?label=financial+contributors)](https://opencollective.com/datalist-polyfill) [![MIT license](https://img.shields.io/npm/l/datalist-polyfill.svg "license badge")](https://opensource.org/licenses/mit-license.php)
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/datalist-polyfill)](https://bundlephobia.com/result?p=datalist-polyfill)
 [![Total downloads ~ Npmjs](https://img.shields.io/npm/dt/datalist-polyfill.svg "Count of total downloads – NPM")](https://npmjs.com/package/datalist-polyfill "datalist polyfill – on NPM")
 [![jsDelivr CDN downloads](https://data.jsdelivr.com/v1/package/npm/datalist-polyfill/badge "Count of total downloads – jsDelivr")](https://www.jsdelivr.com/package/npm/datalist-polyfill "datalist polyfill – on jsDelivr")
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d1f98a2d1fd44c41b7ad5c7670d8cdcd)](https://app.codacy.com/app/mfranzke/datalist-polyfill?utm_source=github.com&utm_medium=referral&utm_content=mfranzke/datalist-polyfill&utm_campaign=badger)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/8338e7ee4e554d05b5277cb449d92375)](https://www.codacy.com/gh/mfranzke/datalist-polyfill/dashboard)
+[![GitHub Super-Linter](https://github.com/mfranzke/datalist-polyfill/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/mfranzke/datalist-polyfill/actions/workflows/linter.yml)
+[![CodeQL](https://github.com/mfranzke/datalist-polyfill/actions/workflows/codeql-analysis.yml/badge.svg?branch=main)](https://github.com/mfranzke/datalist-polyfill/actions/workflows/codeql-analysis.yml)
 [![Known Vulnerabilities](https://snyk.io/test/github/mfranzke/datalist-polyfill/badge.svg?targetFile=package.json)](https://snyk.io/test/github/mfranzke/datalist-polyfill?targetFile=package.json)
-[![dependencies Status](https://david-dm.org/mfranzke/datalist-polyfill/status.svg "Count of dependencies")](https://david-dm.org/mfranzke/datalist-polyfill "datalist polyfill – on david-dm")
+[![Dependencies Status](https://requires.io/github/mfranzke/datalist-polyfill/requirements.svg?branch=main)](https://requires.io/github/mfranzke/datalist-polyfill/requirements/?branch=main)
 [![datalist-polyfill on Npmjs](https://img.shields.io/npm/v/datalist-polyfill.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/datalist-polyfill "datalist polyfill – on NPM")
@@ -15,4 +17,7 @@ [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![Join the chat at https://gitter.im/datalist-polyfill/community](https://badges.gitter.im/datalist-polyfill/community.svg)](https://gitter.im/datalist-polyfill/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+[![Open Source Love](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE-OF-CONDUCT.md)
 
-**Update:** Safari now supports the `datalist` element at least basically, as [announced earlier this year with the latest release of Safari both for iOS and MacOS X](https://developer.apple.com/documentation/safari_release_notes/safari_12_1_release_notes#3130314). Yeah !!! Exciting news!
+**Update:** Safari now supports the `datalist` element at least basically, as [announced earlier in 2019 with the latest release of Safari both for iOS and MacOS X](https://developer.apple.com/documentation/safari_release_notes/safari_12_1_release_notes#3130314). Yeah !!! Exciting news!
 I'm planning to release a new major version soon to both cheer as well as accommodate their implementation.
@@ -170,3 +175,3 @@
 
-[![CrossBrowserTesting](https://crossbrowsertesting.com/blog/wp-content/uploads/2017/09/cbt-wp-logo.png "CrossBrowserTesting")][crossbrowsertestinghomepage]
+[![CrossBrowserTesting](https://static1.smartbear.co/crossbrowsertesting/media/site/cbt-smartbear-logo.svg "CrossBrowserTesting")][crossbrowsertestinghomepage]
 
@@ -229,1 +234,31 @@ [crossbrowsertestinghomepage]: https://crossbrowsertesting.com
 And if you do like this polyfill, please consider even also having a look at the other polyfill we've developed: <https://github.com/mfranzke/loading-attribute-polyfill>
+
+## Contributors
+
+### Code Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+<a href="https://github.com/mfranzke/datalist-polyfill/graphs/contributors"><img src="https://opencollective.com/datalist-polyfill/contributors.svg?width=890&button=false" /></a>
+
+### Financial Contributors
+
+Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/datalist-polyfill/contribute)]
+
+#### Individuals
+
+<a href="https://opencollective.com/datalist-polyfill"><img src="https://opencollective.com/datalist-polyfill/individuals.svg?width=890"></a>
+
+#### Organizations
+
+Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/datalist-polyfill/contribute)]
+
+<a href="https://opencollective.com/datalist-polyfill/organization/0/website"><img src="https://opencollective.com/datalist-polyfill/organization/0/avatar.svg"></a>
+<a href="https://opencollective.com/datalist-polyfill/organization/1/website"><img src="https://opencollective.com/datalist-polyfill/organization/1/avatar.svg"></a>
+<a href="https://opencollective.com/datalist-polyfill/organization/2/website"><img src="https://opencollective.com/datalist-polyfill/organization/2/avatar.svg"></a>
+<a href="https://opencollective.com/datalist-polyfill/organization/3/website"><img src="https://opencollective.com/datalist-polyfill/organization/3/avatar.svg"></a>
+<a href="https://opencollective.com/datalist-polyfill/organization/4/website"><img src="https://opencollective.com/datalist-polyfill/organization/4/avatar.svg"></a>
+<a href="https://opencollective.com/datalist-polyfill/organization/5/website"><img src="https://opencollective.com/datalist-polyfill/organization/5/avatar.svg"></a>
+<a href="https://opencollective.com/datalist-polyfill/organization/6/website"><img src="https://opencollective.com/datalist-polyfill/organization/6/avatar.svg"></a>
+<a href="https://opencollective.com/datalist-polyfill/organization/7/website"><img src="https://opencollective.com/datalist-polyfill/organization/7/avatar.svg"></a>
+<a href="https://opencollective.com/datalist-polyfill/organization/8/website"><img src="https://opencollective.com/datalist-polyfill/organization/8/avatar.svg"></a>
+<a href="https://opencollective.com/datalist-polyfill/organization/9/website"><img src="https://opencollective.com/datalist-polyfill/organization/9/avatar.svg"></a>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80567

increased by16.56%

Number of lines in readme file

262

increased by15.42%

Worsened metrics

Dev dependency count

15

increased by25%

Number of package files

8

decreased by-11.11%

Lines of code

629

decreased by-5.41%

No dependency changes