I’m creating an extension which will automate filling Workday applications. I’ve encountered an issue where on input text fields, my script will fill out the input however the value will not reflect the changes in the DOM. Below is an example of when I try to automate filling in the first name field. I encountered issues during the login phase where directly setting the element.value to the string wouldn’t pass, therefore I went to mimicking keyboard presses.

 let mimicTyping = (string, element) => {
    element.focus();
    for (let i = 0; i < string.length; i++) {
      ['keydown', 'keypress', 'keyup'].forEach(eventType => {
        let event = new KeyboardEvent(eventType, {
          bubbles: true,
          cancelable: true,
          keyCode: string.charCodeAt(i),
          charCode: string.charCodeAt(i),
          key: string[i],
          repeat: false
        });
        element.dispatchEvent(event);
      });

      element.value += string[i];
      let inputEvent = new Event('input', { bubbles: true }); 
      element.dispatchEvent(inputEvent);
    }
  }

  let element = document.querySelector('[data-automation-id="legalNameSection_firstName"]')
  mimicTyping('Bob', element);

I also tried triggering change and blur events, however that still did not lead to any luck. As you can see in the images, the field is filled but the value in the DOM is not. I’ve noticed if I just click on the inputs, it will change the DOM’s value to the correct and I’m then able to continue. Based on that, I tried click events to simulate it, however still no bueno! Input textDOM value empty