0

I'm trying to trigger some events on the form input fields built with React. With javascript or Query, it's so easy to trigger that with .focus() .click() etc

They don't seem to trigger on React inputs and I'm unable to find similar events. Is there a similar way for React inputs which doesn't require rendering JSX etc. just something that can be done without accessing the actual React code 

$('#selector').trigger('blur'); 
$('#selector').trigger('focus');
$('#selector').trigger('click'); 
$('select#selector').prop('selected', true);
DrGoGo
  • 1
  • The code would go in a separate JS file so the solution has to work independently and not requiring editing the actual element. – DrGoGo Jun 18 '19 at 17:06

1 Answers1

-1

Without knowing more about the project it's hard to say, but it's possible that the elements that you are triggering haven't rendered/don't exist at the point that you're trying to interact with or manipulate them. Have you tried adding debuggers at this point and seeing if they exist in the DOM?

Regardless, you should be able to fix achieve this with vanilla JS or jQuery and not have to worry about writing react code.

joshcoles
  • 1
  • 1
  • my friend, I'm already aware of timing/rendering issues. The element does exist in the DOM. its just that React inputs don't behave the same way. e.g I found that even for passing value its not like this we normally do JS that selector.value = 'new value' rather it requires dispatchEvent method – DrGoGo Jun 18 '19 at 19:18