react icon indicating copy to clipboard operation
react copied to clipboard

`readOnly` option change doesn't re-render the <Form /> editability status

Open namti opened this issue 2 years ago • 2 comments

Formio version @formio/[email protected] React version: 18.2.0

Value change of the readOnly option is not taking effect.

...
const [ editable, setEditable ] = useState(true);

return (
  <Form { ...restProps } options={ { readOnly: editable } } />
)
...

Is there a way to let the <Form /> component trigger the option change?

namti avatar Aug 28 '23 21:08 namti

For the temporary solution, I use a random key change to re-render the component manually.

import randomid from 'randomid';
...
const [ editable, setEditable ] = useState(true);
const [ randomKey, setRandomKey ] = useState(randomid(2));

const toggleReadOnly = () => {
  setEditable(!editable);
  setRandomKey(randomid(2));
}

return (
  <Form { ...restProps } key={ randomKey } options={ { readOnly: editable } } />
)
...

namti avatar Aug 28 '23 22:08 namti

Thank you for reporting it. We see the issue. If you know how to fix it in our @formio/react library, your PR will be highly appreciated.

TanyaGashtold avatar Sep 28 '23 13:09 TanyaGashtold