mm-dsibinski

mm-dsibinski

Member Since 2 years ago

Experience Points
0
follower
Lessons Completed
0
follow
Best Reply Awards
1
repos

28 contributions in the last year

Pinned
⚡ Jest Teamcity Reporter
Activity
Nov
10
3 weeks ago
Activity icon
issue

mm-dsibinski issue formio/react

mm-dsibinski
mm-dsibinski

[BUG] isValid flag on submission is set wrongly when number field is added to the form

Environment

Please provide as many details as you can:

  • Hosting type
    • [] Form.io
    • Local deployment
      • Version: N/A
  • Formio.js version: 4.13.9
  • Frontend framework: React
  • Browser: Google Chrome
  • Browser version: Version 95.0.4638.69 (Official Build) (64-bit)

Steps to Reproduce

  1. Download the sample create-react-app project with reproducible example: formio-validation-number.zip

  2. In the app main catalog, execute npm install and then npm start to start the web app.

  3. On the web app, you can see a form. By default, it renders a form (both forms' JSONs are hard-coded in formView.jsx file) with one text area and one checkbox. You can see that the text area control is required:

image

  1. Open dev tools (F12) and see than when clicking on "Form without number" button (which simply re-renders this form), the submission parameter of onChange function has isValid flag correctly set to false:

image

This is so far correct.

  1. Now click on "Form with number" button. This button does nothing more than changing the form prop of the Form component to the one with one additional control - a field of type number. When you click this button one, see what happens in the devtools console (F12) with isValid flag:

image

This is wrong. The isValid flag on submission object should still be false. Validation of the form is not passing.

Expected behavior

When changing the form on Form component, the isValid flag on submission object passed in onChange callback function should not change. It should always reflect the actual validation status of the form.

Observed behavior

'submission.isValidflag changes fromfalsetotrue` when only form definition is changed (number control is added). I also noticed that it doesn't happen with all controls. If you add another text area, this problem doesn't occur.

More info

It might be related to #411 It's very important to fix that. It makes it impossible to block saving/submitting of the form when it has some validation errors, and you are using a custom submit button (not the FormIO's default one defined in form JSON as a component). It not reliable at all and users of our application are getting frustrated with these strange validation issues.

Nov
3
1 month ago
Activity icon
issue

mm-dsibinski issue comment formio/formio.js

mm-dsibinski
mm-dsibinski

[BUG] Validation for select boxes not working properly when content used on the same form

Environment

Please provide as many details as you can:

  • Hosting type
    • [] Form.io
    • Local deployment: only FormIO JS
  • Formio.js version: 4.12.7
  • Frontend framework: React
  • Browser: Google Chrome
  • Browser version: Version 88.0.4324.182 (Official Build) (64-bit)

Steps to Reproduce

Reproduce with FormIO Sandbox

  1. Open https://formio.github.io/formio.js/app/sandbox and load sandbox with id 602e4f222d19c2e78f06b85a
  2. Scroll down to "Form Rendered" section and see that "Multiple choice" (Select Boxes) component is required, but the validation error is not shown:

image

From technical point of view, it means that on submission object the flag isValid is not set to false (while it should be).

Notice that when you remove the "Content" component (the one with text "Some content") from the form, everything works as expected. Also when you select one of the select boxes and deselect it, the validation error appears:

image

Reproduce with form definition JSON You can also reproduce the same behavior with this JSFiddle: https://jsfiddle.net/dsibinski/63ckd5nf/3/

Expected behavior

Validation error is shown straightaway for Select Boxes component and isValid flag on submission obejct is set to false when a required component is used and "Content" component is also present on the same form.

Observed behavior

Validation error is not shown for Select Boxes component and isValid flag on submission object is not set to false.

If there's any workaround for that before the actual bug is fixed, please propose.

mm-dsibinski
mm-dsibinski

hi @travist , can I get some answer here? We have more users facing this problem, and it's really annoying.

Oct
8
1 month ago
Activity icon
issue

mm-dsibinski issue formio/formio.js

mm-dsibinski
mm-dsibinski

[BUG] DevTools failed to load source map: Could not load content for tooltip.js.map:

Environment

Please provide as many details as you can:

  • Hosting type
    • [] Form.io
    • Local deployment
      • Version: N/A, custom backend
  • Formio.js version: 4.13.7
  • Frontend framework: React
  • Browser: Google Chrome
  • Browser version: Version 94.0.4606.81 (Official Build) (64-bit)

Steps to Reproduce

  1. Open any page with formiojs loaded, for example the official builder example: https://formio.github.io/formio.js/app/builder
  2. See the warning in the console about source maps. In our React app, we'are only getting the one about tooltip.js:
DevTools failed to load source map: Could not load content for webpack://Formio/node_modules/tooltip.js/dist/esm/tooltip.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

but there are more there.

Expected behavior

No warning in the DevTools Console.

Observed behavior

Warning about missing source maps.

Example

image

Oct
7
1 month 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.