Update the value of a AtlasKit TextField externally

Atlassian Developer Tools
1

I have a website that uses text fields from @atlaskit/textfield.
I need to update the value of the input from an external javascript script.
Simply doing something like document.querySelector('#my_id').value = 'new value'; does not work because the internal state value does not get updated.

How can I make this work?
I’ve tried dispatching change event and keyboard events but nothing seems to work.

Thanks

2

Are you sure that the document.querySelector('#my_id') returns the input node but not a kind of top div wrapper?

Otherwise, if you have access to the react code with the input component - you can write the update function and put it to the global scope (it is code smell but ok for some fast hack solution)
For exanme

const [val, setValue] = useState('');

useEffect(() => {
  window.updateInputHack = (msg) => {
    setValue(msg)
}
 
}, []);

and call it in external script

updateInputHack('blabla');
3

Hi,

Yes, I’m sure it’s the input node. The input does show the value, but the internal React state is not updated.
I forgot to mention that the React code is not my own so I cannot use the hack solution you proposed.

Thanks

4

Try document.getElementById

5

That’s not the issue. I am getting the correct dom element and I can update the value of it. It’s just that the internal state of the React component does not receive the value. So I’m looking for a way to trigger an update / event / handler of the React component to set a new value.