Dynamically setting an input value with javascript or jQuery is not working

Question

I am trying to update an input value in a Xero contact form.

Here is the HTML I wish to update:

<div class="xui-textinputwrapper xui-field-layout">
   <label class="xui-text-label xui-fieldlabel-layout" data-automationid="ADD-EDIT_PEOPLE_0_EMAIL-ADDRESS--label" for="people[0].emailAddress-control">Email</label>
   <div class="xui-textinput xui-textinput-medium" data-automationid="ADD-EDIT_PEOPLE_0_EMAIL-ADDRESS">
      <div class="xui-textinput--sideelement xui-textinput--sideelement-align-top xui-textinput--sideelement-icon">
         <div class="xui-iconwrapper xui-iconwrapper-medium">
            <svg class="xui-icon xui-icon-color-black-faint" focusable="false" height="10" viewBox="0 0 13 10" width="13">
               <path d="M1 0h11c.5 0 1 .5 1 1v8c0 .5-.5 1-1 1H1c-.5 0-1-.5-1-1V1c0-.5.5-1 1-1zm0 3l5.5 4L12 3V1L6.5 5 1 1v2z" role="presentation"></path>
            </svg>
         </div>
      </div>
      <input name="people[0].emailAddress" inputmode="email" class="xui-textinput--input xui-textinput--input-medium" data-automationid="ADD-EDIT_PEOPLE_0_EMAIL-ADDRESS--input" placeholder="name@email.com" type="text" aria-invalid="false" id="people[0].emailAddress-control" value="test@email.com">
   </div>
</div>

So, in javascript or jquery I have tried getting the class or data-automationid or the actual id, and set the value, but the value gets lost when you click in another input field, or use the save button.

Writing manually into the field works as expected.

Here are some of the commands I have tried to update:

$('[data-automationid="ADD-EDIT_PEOPLE_0_EMAIL-ADDRESS--input"]').val('newEmail@test.com');

const idd = $('[data-automationid="ADD-EDIT_PEOPLE_0_EMAIL-ADDRESS--input"]').attr("id");
document.getElementById(idd).value = 'newEmail@test.com';

document.querySelector('[data-automationid="ADD-EDIT_PEOPLE_0_EMAIL-ADDRESS--input"]').value = 'newEmail@test.com';

All give the same behaviour i.e. value can be seen in the input field but gets lost when the input field is clicked, or another input field on the page is clicked, or the save button is clicked.

I have never seen this before. Could it be something that Xero are doing to prevent this?

I have also tried using id directly on another input field on the page:

<input name="contactName" class="xui-textinput--input xui-textinput--input-medium" data-automationid="ADD-EDIT_CONTACT-NAME--input" placeholder="A business or person's name" aria-invalid="false" id="contactName-control" value="name1">

document.getElementById('contactName-control').value = "name2";

This gives the same behaviour.

Any ideas?

Dynamically setting an input value with javascript or jQuery is not working

0 Answers0