Trigger click event for react element

Okay so I figured it out. It turns out that react is very picky about the events being isTrusted: true AND it also needs a property nativeEvent : {detail:1}

So this will be complicated but to simulate the click correctly you have to first identify where the 'onClick' react element is.

In my case the element was the <div class="wrap-XdW9S1Ib" draggable="true"> from my tradingview example.

Thanks to the handy command monitorEvents($0,"click") which you can type in the console it will record all clicks for the last selected item in the elements tab view.

Using this you can type something like: var elem = $0; to easily set the element, or you can just select it like how I did in my question.

Next, a key thing to understand is that the isTrusted property of events is there to determine if the click was a genuine click or not. This is why elem.click() will not work!

So how do we get around this?

By putting a click event manually on top and recording the event to a global variable called event!

var event;
elem.addEventListener("click",function(e){console.log("click detected");event=e});

The key here is event=e to store it to the global variable. Now doing this alone is not enough, as if you call elem.click() this will just simply call both click events and it still will not work.

But, REACT works using synthetic events and takes the 'event' object to work with to pass on its data.

Therefore, if you know where its true onClick event is that supercedes the usual onclick you can call it directly with this isTrusted: true event.

Type a command like this to find the __reactProps for the object.

for(key in elem){console.log(key)}

This will print out all the objects. In my case onClick was hiding inside of elem.__reactProps$3jcigo40r49

Now simply call:

elem.__reactProps$3jcigo40r49.onClick(event);

and it will correctly treat it like an actual mouse click and trigger all the changes as you would expect. Except... wait, it still didn't work cause you get an error saying Cannot read properties of undefined (reading 'detail').

To fix this simply say in console.

event.nativeEvent = {detail:1}

Now try the previous command again and it will work!

EDIT -- Even easier Answer Below

Turns out there is an even easier solution.

It appears that in my case isTrusted does not matter. It was the nativeEvent: {details:1} that did.

Simply create a new pointer event like this.

var testEvent = new PointerEvent("click");
testEvent.nativeEvent = {detail:1}
elem.__reactProps$3jcigo40r49.onClick(testEvent);

3 lines of code and you can click!