formio / react

JSON powered forms for React.js

Home Page:https://form.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

namti opened this issue · comments

Formio version @formio/react@5.3.0-rc.2
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?

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 } } />
)
...

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.