[BUG] FormBuilder onChange props, using schema for setState is throwing error.
See original GitHub issueEnvironment
- Formio.js version: 4.0.0-rc.12
- React-formio version: 4.0.0-rc.7
- Frontend framework: React
- Browser: Chrome
- Browser version: Chrome 75
Steps to Reproduce
- Embed FormBuilder in react app (create-react-app)
- Provide onChange prop, use the schema to change state
import React, { useState } from 'react';
import { FormBuilder } from 'react-formio';
const App = () => {
const [schemaState, setSchemaState] = useState();
return (
<div>
<FormBuilder
form={{ display: 'form' }}
onChange={(schema) => setSchemaState(JSON.stringify(schema))}
/>
</div>
);
}
export default App;
Expected behavior
Should update state without error.
Observed behavior
Not updating state. Throws an error: ‘dragula.js:710 Uncaught TypeError: Failed to execute ‘elementFromPoint’ on ‘Document’: The provided double value is non-finite.’
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (8 by maintainers)
Top Results From Across the Web
[BUG] FormBuilder onChange props, using schema for ...
Not updating state. Throws an error: 'dragula.js:710 Uncaught TypeError: Failed to execute 'elementFromPoint' on 'Document': The provided double ...
Read more >Running into a state error when attempting to change an input ...
I when I pass state down from a parent component the setState keeps throwing an error stating that setEmail ...
Read more >Usage - react-json-schema-form-builder documentation
The following example is a React component that simply maintains a Form Builder and stores the corresponding JSON schema as state variables, instead...
Read more >React form validation solutions: An ultimate roundup
This roundup is a comprehensive look at some of the most popular solutions for form management and validation in React.
Read more >Advanced Usage - React Hook Form
With the Form component injecting react-hook-form 's props into the child component, you can easily create and compose complex forms in your app....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think this is an issue because dragula manipulates the dom directly, which conflicts with react’s dom management. Isolating FormBuilder from its parent like in the following resolves the issue, but this may not work for everyone, if there’s a situation in which FormBuilder does need to update with state.
@jhen1422 This is still an open issue for us due the fact that we need to pass state into the form builder. Otherwise when a user switches between form and wizard we lose the components that was added. This was a feature of the old form builder