CODEWITHSUNDEEP
javascriptreactjsformbuilderformio
Esther Cuan
Esther Cuan

Reputation: 377

Custom FormIO FormBuilder in React JS errors out

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?

Upvotes: 2

Views: 2490

Answers (1)

Amir Pasha Bagheri
Amir Pasha Bagheri

Reputation: 56

I know it's very late but I hope it helps someone else :

  1. default: true should be used for only one category : basic , data , layout or ... , when you set default to true , this category will be the opened one when your builder get rendered. so it does not make any sense when you try keep two categories open at the same time at initial rendering.

  2. All the categories and fields have their own default behavior, if you don't want that behavior , you can override or completely ignore that part, you set the value to false just like what you did to layout or password to completely ignore that part , or if you want to override the behavior, you should implement your own settings as object , etc:

    builder: {
    basic: {
      default: false,
    },
    custom: {
      title: 'Pre-Defined Fields',
      weight: 1,
      default: true,
      components: {
        province: true,
        jalali: true,
      },
    },
  }

Upvotes: 0

Related Questions