Auto Fill set value for input does not pass validation - JavaScript

Question

I'm trying to build an AutoFill feature for a website on iOS in-app browser (WKWebView) by injected a JavaScript into the WebView

My injected JavaScript is able to set the value to the input, but the problem is when the input gets lost focus, the filled value will be removed from the input!

My trying:

1. I have tried to get the element and set its value:

inputNode.value = "John";

or

inputNode.setAttribute("value", "John");

or

inputNode.defaultValue = "John";

or

inputNode.textContent = "John";

or inputValue from (https://github.com/mui/material-ui/issues/19847)[https://github.com/mui/material-ui/issues/19847]

inputNode.inputValue = "John";

2. I also try to simulate the text change events using dispatchEvent, by following this one Is it possible to simulate key press events programmatically? but still not working!

Events: focus, input, change, keyup, keydown, beforeinput, keypress

===============

The issue:

1. Value is filled successfully

2. When changing focus, the value is removed automatically

===============

Questions:

1. Do you know any tricks to get rid of this issue in JavaScript?
2. Or are there other events should I fire when changing the input value? (It might be some UI framework has its own events e.g. https://mui.com/, or https://material.io/develop/web)

Thank you so much ‍♂️