Input - Updating value from other source

[mmj-ssb]

Describe the bug
If you store the value for a Input component in state (controlled-component) and set the value from another source than the Input component itself, through handleChange or as initial value, the value of the text field is not updated. With React Developer Tools the props on the component looks to be updated but not the state (see screenshot).

To Reproduce
Steps to reproduce the behavior:

1. Put the value of the Input component in a state
2. Set that state from somewhere else
3. Watch as the value is not updated

Code example:

const [url, setUrl] = useState('defaultUrl')

return (
  <Input value={url} handleChange={(value) => setUrl(value)} />
  <Button onClick={() => setUrl('newUrl')} />
)

If you click the button the value in the text field is still 'defaultUrl'.

Expected behavior
The value (state) of the text field should be updated.

Screenshots

Additional context
This becomes a problem if you for example want a button that sets default values for inputs.

This is really just a visual bug but makes the user experience bad.

[ssb-cgn]

Vi oppretter en sak på dette :)

[rsassb]

Har dere sett noe mer på denne saken, @ssb-cgn? Vi er flere som har behov for samme funksjonalitet :)