Trigger event manually

Question

There is a website which create elements like below and attach onChange function to it:

o.createElement(k.InputField, {
                label: "Enter mobile number",
                variant: "secondary",
                value: i.trim(),
                disabled: v,
                InputProps: {
                  onChange: ({ target: { value: e } }) => {
alert("testing");
                  },
                  maxLength: 10,
                  autoFocus: !0,
                  id: "mobileNum",
                },
                error: Ve.mobileNumberValidationMessage(f, String(i)),
                before: o.createElement(k.Text, { variant: "body", color: "text.2" }, "+", 91),
                css: Ct,
              })

I tried everything to trigger it, only when I type in keyboard it's triggering the alert. I even looped all events like below, but nothing is triggering it:

 const inputElement = document.getElementById("mobileNum");

                  // Step 2: Set its value programmatically
                  const newValue = "9"; // Example new value
                  inputElement.value = newValue;
const eventTypes = [
    "input",        // Input event when the value of an input element changes
    "change",       // Change event when the value of an input element changes and loses focus
    "keydown",      // Keydown event when a key is pressed down
    "keyup",        // Keyup event when a key is released
    "keypress",     // Keypress event when a key is pressed
    "click",        // Click event when a mouse click occurs
    "dblclick",     // Double click event when a mouse double click occurs
    "mousedown",    // Mousedown event when a mouse button is pressed down
    "mouseup",      // Mouseup event when a mouse button is released
    "mousemove",    // Mousemove event when the mouse pointer is moved
    "mouseover",    // Mouseover event when the mouse pointer enters an element
    "mouseout",     // Mouseout event when the mouse pointer leaves an element
    "wheel",        // Wheel event when the mouse wheel is scrolled
    "contextmenu",  // Contextmenu event when the right mouse button is clicked
    "touchstart",   // Touchstart event when a finger touches the screen
    "touchend",     // Touchend event when a finger is removed from the screen
    "touchmove",    // Touchmove event when a finger is dragged across the screen
    "touchcancel",  // Touchcancel event when a touch event is interrupted
    "focus",        // Focus event when an element gains focus
    "blur",         // Blur event when an element loses focus
    "submit",       // Submit event when a form is submitted
    "reset",        // Reset event when a form is reset
    "resize",       // Resize event when the window or element is resized
    "scroll"        // Scroll event when the window or element is scrolled
];

eventTypes.forEach(eventType => {
    const event = new InputEvent(eventType, {
        inputType: "insertText",
        data: newValue,
        bubbles: true,
        composed: true
    });
    inputElement.dispatchEvent(event);
});

All it does is typing in the input, but it's not alerting in the onChange, but if I press backspace or type something manually it's alerting.

How do I exhibit the real typing behaviour on this input?

Answer 1

What you want is probably "how to trigger trusted input" and this one is simple, you can use document.execCommand() for this. E.g.

document.getElementById('mobileNum').focus();
document.execCommand('insertText', false, "9837585855");
document.getElementById('getOtp').click();

EDIT

In my opinion, even though the above method is deprecated, it still works and shouldn't be a problem for the mean time, but i'm not sure what use case you want. So here i'll provide another way:

const input = document.getElementById('mobileNum');
Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set.call(input, "9837585855");
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);
document.getElementById('getOtp').click();