2

Thank you for reading my question.

I am using FormIO in my react application to render a form builder. I need to limit the components available to drag-n-drop to only certain ones–very much like how this official FormIO doc says: https://formio.github.io/formio.js/app/examples/custombuilder.html

Here is my Form Builder options component: 

 import { FormBuilder } from 'react-formio'

 <FormBuilder
      form={{ display: 'form' }}
      onChange={schema => setSchema(schema)}
       options={{
        builder: {
          layout: false,
          premium: false,
          basic: {
            default: true,
            components: {
              password: false,
              radio: false,
              button: false,
            },
          },
          advanced: {
            default: true,
            components: {
              signature: false,
            },
          },
        },
      }}
    />

As you can see Id like to remove: layout, premium and parts of the basic and advanced. I also mean to keep all components from the data section, but adding the data: true breaks everything even more. With this options object, the form builder DOES hide the particular requested fields but the moment you try to expand a component section (like data) this error appears on the console and you are unable to expand: 

Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

The moment you try to drag and drop a component to make your form the app crashes with this other error: 

Uncaught TypeError: Failed to execute 'elementFromPoint' on 'Document': The provided double value is non-finite.

What am I doing wrong?

Esther Cuan
  • 367
  • 1
  • 16
  • 1
    It appears your options configuration works fine. It may be the JS part of your react component that's acting up. Check out this code example, using your options configuration - https://codesandbox.io/embed/cra-react-formio-56hm8?fontsize=14&hidenavigation=1&theme=dark – Jeremy Mar 05 '20 at 04:25
  • 1
    Curious if this answer might help track down the problem. https://stackoverflow.com/a/58290679/1308685 – Jeremy Mar 05 '20 at 14:40

0 Answers0