How to control a react-select component from a Chrome extension?

I’m trying to write a Chrome extension to automate the filling out of a new issue in Jira, and in order to do this, I need to control a react-select component from my content_script. These are very tricky beasts indeed since they are made up of lots of divs within which is an actual input (that is often hidden until you click on it).

I’ve created a small codesandbox demo which has a basic react-select example and a button that sets focus to the input and types the letters “Red” to filter the options. I’ve sprinkled lots of timeouts in there to slow it down in case I need to wait for things to process before I can type (such as focusing the input field), but my experiments have been futile.

In the basic example I copied from the react-select site, the hidden input field is in the DOM at all times (thankfully), but it doesn’t appear in Jira until you click on it (alas!). So that will be another challenge, but even in this basic example, I can’t even get it to work.

Is it possible to simulate user clicks and keyboard events like this, or is this behaviour seen as potentially suspicious and deliberately blocked by the browser? Am I asking the impossible?

Thanks.