datalist-polyfill.js
function(event) {
		// Check for correct element on this event delegation
		if (!event.target.matches('input[list]')) {
			return;
		}

		var input = event.target,
			datalist = input.list;

		// Check for whether the events target was an input and still check for an existing instance of the datalist
		if (input.tagName.toLowerCase() !== 'input' || datalist === null) {
			return;
		}

		// Test for whether this input has already been enhanced by the polyfill
		if (!input.matches('.' + classNameInput)) {
			prepareInput(input, event.type);
		}

		// #GH-49: Microsoft EDGE / datalist popups get "emptied" when receiving focus via tabbing
		if (isEDGE && event.type === 'focusin') {
			// Set the value of the first option to it's value - this actually triggers a redraw of the complete list
			var firstOption = input.list.options[0];

			firstOption.value = firstOption.value;
		}

		// Break here for IE10+ & EDGE
		if (isGteIE10 || isEDGE) {
			return;
		}

		var // Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted)
			datalistSelect =
				datalist.getElementsByClassName(classNamePolyfillingSelect)[0] ||
				setUpPolyfillingSelect(input, datalist),
			// 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
			visible =
				datalistSelect &&
				datalistSelect.querySelector('option:not(:disabled)') &&
				((event.type === 'focusin' && getInputValue(input) !== '') ||
					(event.relatedTarget && event.relatedTarget === datalistSelect));

		// Toggle the visibility of the datalist select according to previous checks
		toggleVisibility(visible, datalistSelect);
	}
function(event) {
		// Check for correct element on this event delegation
		if (!event.target.matches('input[list]')) {
			return;
		}

		var input = event.target,
			datalist = input.list;

		// Check for whether the events target was an input and still check for an existing instance of the datalist
		if (input.tagName.toLowerCase() !== 'input' || datalist === null) {
			return;
		}

		// Test for whether this input has already been enhanced by the polyfill
		if (!input.matches('.' + classNameInput)) {
			prepareInput(input, event.type);
		}

		// #GH-49: Microsoft EDGE / datalist popups get "emptied" when receiving focus via tabbing
		if (isEDGE && event.type === 'focusin') {
			// Set the value of the first option to it's value - this actually triggers a redraw of the complete list
			var firstOption = input.list.options[0];

			firstOption.value = firstOption.value;
		}

		// Break here for IE10+ & EDGE
		if (isGteIE10 || isEDGE) {
			return;
		}

		var // Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted)
			datalistSelect =
				datalist.getElementsByClassName(classNamePolyfillingSelect)[0] ||
				setUpPolyfillingSelect(input, datalist),
			// 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
			visible =
				datalistSelect &&
				datalistSelect.querySelector('option:not(:disabled)') &&
				((event.type === 'focusin' && getInputValue(input) !== '') ||
					(event.relatedTarget && event.relatedTarget === datalistSelect));

		// Toggle the visibility of the datalist select according to previous checks
		toggleVisibility(visible, datalistSelect);
	}
function ( event ) { // Check for correct element on this event delegation if ( ! event . target . matches ( 'input[list]' ) ) { return ; } var input = event . target , datalist = input . list ; // Check for whether the events target was an input and still check for an existing instance of the datalist if ( input . tagName . toLowerCase ( ) !== 'input' || datalist === null ) { return ; } // Test for whether this input has already been enhanced by the polyfill if ( ! input . matches ( '.' + classNameInput ) ) { prepareInput ( input , event . type ) ; } // #GH-49: Microsoft EDGE / datalist popups get "emptied" when receiving focus via tabbing if ( isEDGE && event . type === 'focusin' ) { // Set the value of the first option to it's value - this actually triggers a redraw of the complete list var firstOption = input . list . options [ 0 ] ; firstOption . value = firstOption . value ; } // Break here for IE10+ & EDGE if ( isGteIE10 || isEDGE ) { return ; } var // Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted) datalistSelect = datalist . getElementsByClassName ( classNamePolyfillingSelect ) [ 0 ] || setUpPolyfillingSelect ( input , datalist ) , // 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 visible = datalistSelect && datalistSelect . querySelector ( 'option:not(:disabled)' ) && ( ( event . type === 'focusin' && getInputValue ( input ) !== '' ) || ( event . relatedTarget && event . relatedTarget === datalistSelect ) ) ; // Toggle the visibility of the datalist select according to previous checks toggleVisibility ( visible , datalistSelect ) ; }
Focusin and -out events
Focusin and - out events