Trying to manipulate dom object in the console

Question

I'm trying to learn how to manipulate an existing DOM while playing around with building browser extensions and I can't seem to track down the correct process for one instance:

One of the pages I'm working with does a search call based on a field input. I am trying to trigger this programmatically, but I cannot get it to work by changing the value or triggering a simple change event.

This is what the DOM element looks like:

<input aria-label="collectible search" class="Container_search-input" type="text" placeholder="Search Here" value>

This is what I'm currently trying, which changes the text in the box, but doesn't trigger the event:

    var myInputElement =  document.querySelector('.Container_search-input');
    var myEventX = new Event("change", { bubbles: true, cancelable: true });
    myInputElement.setAttribute("value", 'search text');
    //myInputElement.value = 'search text';
    myInputElement.dispatchEvent(myEventX);

I've also tried the above changing the input instead of the value. Nothing seems to trigger the event listener.

Is there something that may be adding an additional layer of abstraction here? I think the page is being rendered using reactJS.

This is what I see for the first properties in Chrome's dev tools

value: ""
__reactEventHandlers$fq43xerpa7q: 
  aria-label: "collectible search"
  className: "Container_search-input"
  onChange: e=>C(e.target.value)
  length: 1
  name: "onChange"
  arguments: (...)
  caller: (...)
  [[FunctionLocation]] : <unknown>
    [[Prototype]]: ƒ ()
    apply: ƒ apply()
    arguments: (...)
    bind: ƒ bind()
    call: ƒ call()
    caller: (...)
    constructor: ƒ Function()
    length: 0
    name: ""
    toString: ƒ ()
    Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
    get arguments: ƒ ()
    set arguments: ƒ ()
    get caller: ƒ ()
    set caller: ƒ ()
    [[FunctionLocation]]: <unknown>
        [[Prototype]] : Object
        [[Scopes]] : Scopes[0]
        [[Scopes]] : Scopes[3]
        placeholder : "Search Here"
        type : "text"
        value : ""
        [[Prototype]] : Object

I can't copy all of the properties here, but there is also another that is a reactInternal Instance that might be relevant.

I'm not quite sure how else to approach this. Hours of internet searches continue to lead to examples only for editing from the page creator's perspective, which is not relevant to my problem.

Answer 1

This is an issue specific to React, as you may see in the below link from the Official React Repository. A contributor states the following:

https://github.com/facebook/react/issues/19389#issuecomment-660386187

Hey @..., this is expected behavior. onChange will only fire when the value in the input has changed due to user input or some other DOM mutation on that input element. It isn't meant to fire when value changes.

Hope that helps!

This would essentially work on other frameworks or Vanilla JS.