Oct
26
2 days ago
Activity icon
fork

chokofi forked formio/react

⚡ JSON powered forms for React.js
chokofi MIT License Updated
fork time in 2 days ago
Oct
25
3 days ago
Activity icon
issue

j-perl issue comment formio/react

j-perl
j-perl

[BUG] migrating from react-formio - what replaces "ref" prop?

Environment

  • Hosting type
    • Form.io
    • Local deployment
      • Version: 5.1.1
  • Formio.js version: 4.13.2
  • Frontend framework: react 16.13.1

Migrating to @formio/react from react-formio: We were using the ref prop to return the instance of the formio object to access its apis:

           <Form
              ref={(form: any) => setFormObj(form)}
              onSubmit={() => {
                ClientLogger.error('FormDisplayPrevious.onsubmit', 'Called submit');
              }}
              options={{ noAlerts: true, readOnly: true, getData: (id: string) => getForm(id), inEditor: false }}
              form={parsedForm}
              onPrevPage={resetScroll}
              onNextPage={resetScroll}
              onCustomEvent={formCustomEvent}
              onRender={formReady}
            />

ref prop has been removed - how do we now get access to form?

j-perl
j-perl

Until the Form component gets wrapped with forwardRef, this is currently not possible. The way I found to get around this was to use our own component for the time being.

Activity icon
issue

j-perl issue comment formio/react

j-perl
j-perl

Is `react-formio` npm package still needed?

Hi guys, I've been using the react-formio npm package (https://www.npmjs.com/package/react-formio) so far, but I noticed that there's a maintained one under @formio/react (https://www.npmjs.com/package/@formio/react).

For me it seems that https://www.npmjs.com/package/react-formio is not updated anymore. Shouldn't this npm be removed or at least an information added on its npm page, that now https://www.npmjs.com/package/@formio/react should be used?

j-perl
j-perl

Also found that out as I was looking for the latest version (5 and above).

Oct
22
6 days ago
started
started time in 6 days ago
Oct
21
1 week ago
started
started time in 1 week ago
Oct
19
1 week ago
pull request

DerH4NNES pull request formio/react

DerH4NNES
DerH4NNES

Decreased webpack prod build size

This change decreased my projects webpack build size from 2.2MB to 900KB

Oct
18
1 week ago
Activity icon
fork

schfug forked formio/react

⚡ JSON powered forms for React.js
schfug MIT License Updated
fork time in 1 week ago
Oct
13
2 weeks ago
started
started time in 2 weeks ago
Oct
7
3 weeks ago
Activity icon
issue

mm-dsibinski issue formio/react

mm-dsibinski
mm-dsibinski

[BUG] Form's onChange not called after form's field validation rule updated from required to non-required

Environment

Please provide as many details as you can:

  • Hosting type
    • Local deployment
      • Version: N/A, issue only with @formio/react
  • Formio.js version: 4.13.7
  • @formio/react version: 5.1.1
  • Frontend framework: React
  • Browser: Google Chrome
  • Browser version: Version 94.0.4606.71 (Official Build) (64-bit)

Steps to Reproduce

I prepared a simple app reproducing the problem:

formio-validation.zip

Unzip the app and launch it by executing npm install first and then npm start inside the app folder.

The app simply renders a Form with some form definition object provided with form property and logs the fact that onChange was called in the console:

const onFormChange = (submission) => {
    console.log("onFormChange called");
  };
.....
<Form form={formObject} onChange={onFormChange} />

Initially, the multi-choice component is set as required in the form definition's validation section (formWithRequired object):

image

When the app opens in the browser, open Developer Console.

When checking and unchecking the checkboxes, you can see in the console that onChange is called properly after each change:

image

Now, click the "Set not required" button:

image

It basically calls the function which sets new form. The only difference is that in this new form's definition (formWithoutRequired object) the required is set to false:

image

After clicking this button, you can see in the console that the onChange event is not called anymore.

Expected behavior

The onChange event should always be called. Even if the state of the form has been changed with different validation rules.

Observed behavior

The onChange event is not called as soon as the form property of Form component is changed to another one with non-required validation rules.

Additional info

What is even stranger, is that when you click "Set required" button again, the onChange will be called properly again. Additionally, it works correctly with @formio/react 5.0.0.

I think it may be related to these changes: https://github.com/formio/react/commit/7b67970fd7e56e96d0f23dd699d263943ab6488f But I'm not sure about that.

Oct
4
3 weeks ago
Activity icon
issue

madflow issue comment formio/react

madflow
madflow

[BUG] Form does not change language when options change

Environment

Please provide as many details as you can:

  • Hosting type
    • [] Form.io
    • Local deployment
      • Version: Latest
  • Formio.js version: Latest
  • Frontend framework: React
  • Browser: Firefox latest
  • Browser version: latest

Steps to Reproduce

  1. Use React and Formio with i18next.
  2. Configure everything something like this:
  const options = {
    i18n: {
      [i18n.language]: i18n.getResourceBundle(i18n.language, 'translation'),
    },
    language: i18n.language,
    hooks: {},
  };

// https://help.form.io/developers/form-renderer#form-renderer-options
  return (
    <>
      <Form
        src={url}
        onSubmitDone={onSubmitDone}
        formReady={onFormReady}
        options={options}
      />
      {isReady ? null : <LoadingSpinner animation="border" />}
    </>
  );
  1. Change the language

Expected behavior

  • Language changes in the form

Kapture 2021-09-27 at 17 53 35

Observed behavior

  • Language does not change

Kapture 2021-09-27 at 17 56 29

This can be hack-fixed by amending Form.jsx , https://github.com/formio/react/blob/e9d61b0dc7ec45be966fd57b92c41e9b9f8483ab/src/components/Form.jsx#L62

  useEffect(() => {
    const { src } = props;
    if (src) {
      createWebformInstance(src).then(() => {
        if (formio) {
          formio.src = src;
        }
      });
      initializeFormio();
    }
  }, [props.src, props.options]);
Previous