I'm trying to make an autofill for a form with google extension. My code only works for the second element, the first one gets populated but when I go next and then go back again the value disappear (If I remove the second element and its functions, the first one works fine, maybe its something with the focus() but I'm not sure)

let input1 = document.querySelectorAll('.vlocity-input')[0];
input1.focus();
document.execCommand('insertText', false, 'OS Autofill');
input1.dispatchEvent(new Event('change', {bubbles: true}));

let input2 = document.querySelectorAll('.vlocity-input')[1];
input2.focus();
document.execCommand('insertText', false, 'OS Autofill');
input2.dispatchEvent(new Event('change', {bubbles: true}));

And the second problem is that the method execCommand is deprecated. I tried with keyboard events and with element.value() but it doesn't work. Does anyone know what is happening here? Thanks

I get this code from here: Enter data into a custom-handled input field

PS: Yes, the problem here is the focus(). I tried with the same code but with a setTimeout (after the second element gets executed) which set the focus on the first element, and the result is that only keep the value of the first element, and the second gets lost.

let input1 = document.querySelectorAll('.vlocity-input')[0];
input1.focus();
document.execCommand('insertText', false, 'OS Autofill');
input1.dispatchEvent(new Event('change', {bubbles: true}));

let input2 = document.querySelectorAll('.vlocity-input')[1];
input2.focus();
document.execCommand('insertText', false, 'OS Autofill');
input2.dispatchEvent(new Event('change', {bubbles: true}));

setTimeout(()=>{
    input1.focus()
    console.log('focus set')
}, 2000)