Internet Explorer 10 not triggering the 'input' event when selecting an option from the datalist

Question

Internet Explorer 10 not triggering the 'input' event when selecting an option from the datalist

Within this particular scenario, there is an input field paired with a corresponding datalist element. My aim is to develop JavaScript code that actively listens for when a user chooses an item from the list. Most resources suggest utilizing the "input" event handler for this task, and in browsers like Chrome and Firefox it functions seamlessly. However, Internet Explorer presents a challenge.

In IE10, I have observed the following behavior:

Tapping into the field triggers the event.
The event does not trigger upon initial selection of an item from the datalist.
Re-selecting the same option successfully fires the event.

To demonstrate, here's a test:

https://i.stack.imgur.com/f7Eqn.gif

$('input').on('input', function(){
    console.log($('input').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

If anyone has any insights on how I can compel Internet Explorer to trigger the desired event (or any event) so that I may execute a function upon user selection, I would greatly appreciate it.

javascript internet-explorer-10 dom-events html-datalist

Answer 1

Answer №1

Encountered the same issue on IE11 with a custom autocomplete list inspired by https://www.w3schools.com/howto/howto_js_autocomplete.asp

After some testing, it became apparent that IE11 was triggering the input event when clicking away from the input box (losing focus), contrary to other browsers that only fired this event upon text entry.

The workaround involved implementing a check for changes in the input value specifically for IE:

function inputEventGeneral(input, fn) { //input event for any browser
    if (checkBrowserIE()) {
        inputEventIE(input, fn);
    } else {
        input.addEventListener('input', function (e) { //normal input event for Chrome, FF, etc.
            fn(this); //run this function on input
        });
    };
};

function inputEventIE(input, fn) { //input event for IE
    let curr = '';
    let prev = '';

    input.addEventListener('input', function (e) {
        curr = this.value;

        if (prev === curr) { //check if value changed
            return;
        };

        prev = curr; //update value of prev

        fn(this); //run this function only if the value has been changed
    });
};


function checkBrowserIE() {
    return (/Trident/.test(navigator.userAgent)); //https://stackoverflow.com/questions/22004381/ie-input-event-for-contenteditable
};

Additionally, in IE, there's an issue with the clear button ('x') on text input fields not triggering an input event with the provided code. To address this, you could either a) hide the clear button using CSS:

input[type=text]::-ms-clear { display: none; }

or b) adjust the code to store the value of prev in a data-prev attribute or a global variable and update it whenever the input form value changes (such as selecting from the autocomplete list/datalist). This modification would ensure the event fires upon clicking the clear button since the prev value (val) will differ from the curr value ('') when clearing the field.

Hopefully, this information proves helpful!

Answer 2

Encountered the same issue on IE11 with a custom autocomplete list inspired by https://www.w3schools.com/howto/howto_js_autocomplete.asp

After some testing, it became apparent that IE11 was triggering the input event when clicking away from the input box (losing focus), contrary to other browsers that only fired this event upon text entry.

The workaround involved implementing a check for changes in the input value specifically for IE:

function inputEventGeneral(input, fn) { //input event for any browser
    if (checkBrowserIE()) {
        inputEventIE(input, fn);
    } else {
        input.addEventListener('input', function (e) { //normal input event for Chrome, FF, etc.
            fn(this); //run this function on input
        });
    };
};

function inputEventIE(input, fn) { //input event for IE
    let curr = '';
    let prev = '';

    input.addEventListener('input', function (e) {
        curr = this.value;

        if (prev === curr) { //check if value changed
            return;
        };

        prev = curr; //update value of prev

        fn(this); //run this function only if the value has been changed
    });
};


function checkBrowserIE() {
    return (/Trident/.test(navigator.userAgent)); //https://stackoverflow.com/questions/22004381/ie-input-event-for-contenteditable
};

Additionally, in IE, there's an issue with the clear button ('x') on text input fields not triggering an input event with the provided code. To address this, you could either a) hide the clear button using CSS:

input[type=text]::-ms-clear { display: none; }

or b) adjust the code to store the value of prev in a data-prev attribute or a global variable and update it whenever the input form value changes (such as selecting from the autocomplete list/datalist). This modification would ensure the event fires upon clicking the clear button since the prev value (val) will differ from the curr value ('') when clearing the field.

Hopefully, this information proves helpful!

Internet Explorer 10 not triggering the 'input' event when selecting an option from the datalist

Answer №1

Similar questions

Is there a way to categorize data and sort it by using an action and reducer in redux?

Utilize a MongoDB query to locate a single document and include a conditional statement within the update operation

Bring in TypeScript property from an external scope into the current scope

Is there a method in AngularJS to have $http.post send request parameters rather than JSON?

Only match the character if it is not at the beginning of the line and if another character is not on the

What makes React.js such a challenging skill to master?

Rect cannot be resized using mouse events

Modifying information in a single array in Vue JS has a ripple effect on

show information retrieved from database according to the drop-down menu selection

Restrict the number of rows in a CSS grid

What is the best way to link the width and height of a div with form fields?

Encountering compilation issues with Jest in Vue project, yet the tests are successfully passing

Accessing properties in JSON data with AngularJS

Send the values of the form variables as arguments

Preserve the ajax controls while uploading files

ReactJS component not triggering OnChange event in IE 11

The Server Components render encountered a glitch

What is the best way to incorporate a transition on transform using Styled-components?

Ember application experiencing trouble displaying Facebook Like Box

Using the same function in two different locations will only work for one instance