Javascript – press enter key after updating input value

I am trying to press the enter key programmatically using Javascript, but only after value of an input is updated, also using Javascript.

It is updating the value successfully but the enter key press is not taking place.

Please note that there are multiple inputs and the following code is inside a loop for all the inputs.

// update value of input
document.querySelectorAll("input[type='number']")[index].value = 5;
// press enter key
var el = document.querySelectorAll("input[type='number']")[index];
var ev = new KeyboardEvent('keydown', {altKey:false,
    bubbles: true,
    cancelBubble: false, 
    cancelable: true,
    charCode: 0,
    code: "Enter",
    composed: true,
    ctrlKey: false,
    currentTarget: null,
    defaultPrevented: true,
    detail: 0,
    eventPhase: 0,
    isComposing: false,
    isTrusted: true,
    key: "Enter",
    keyCode: 13,
    location: 0,
    metaKey: false,
    repeat: false,
    returnValue: false,
    shiftKey: false,
    type: "keydown",
    which: 13});
el.addEventListener('keydown', function () { 
    console.log("Press enter now");
    el.dispatchEvent(ev);
});

P.S. – This is for a chrome extension, to manipulate the inputs of a webpage, and those inputs require enter key to be pressed, for the cart to update.

Answer

I think you correctly saw the issue; you are trying to dispatch keydown event inside a keydown listener which would end in an infinite loop.

If you want to dispatch a keydown event after the value is updated programmatically, you should put the dispatch line after the value change line:

document.querySelectorAll("input[type='number']")[index].value = 5;
el.dispatchEvent(new Event('keydown'));

If you are not the one triggering the change of value, it is a bit different (and more complicated). Here are question 1 and question 2 that address that exact issue.