formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.83k stars 1.04k forks source link

Validation Error for Select Component and Data Source Type URL #5523

Open Leeloo5E opened 4 months ago

Leeloo5E commented 4 months ago

Describe the bug

When using the Select component with the DataSource "URL" selected, a validation error occurs in the browser console.

If you use several of these select components with "URL", the browser becomes increasingly slower and even stops. The form is also hardly usable anymore.

Version/Branch

├── @formio/js@5.0.0-rc.39 ├── @formio/core@2.0.0-rc.10

Steps To Reproduce

  1. Install Formio JS and create form builder
  2. Create a select component
  3. Go to data section and select "URL" as Data Source Type
  4. Set a Data Source URL
  5. Save the form
  6. Open form in Viewer

Expected behavior No error. Form works well.

Actual behavior

Validator error: Failed to validate available values in select component 'organizationalUnitName': data source url is not valid}

Additional context Seems the error is cause from https://github.com/formio/core/blob/v2.0.0-rc.10/src/process/validation/rules/validateAvailableItems.ts#L141

lane-formio commented 3 months ago

My initial suggestion is to update core to the latest rc to see if that has resolved. Otherwise, I'd suggest using the latest stable release versions.

radovan-jupa commented 2 months ago

I tried @formio/js 5.0.0-rc.47 with @formio/core 2.1.0-dev.tt.3 (both latest versions) and I have same issue.

radovan-jupa commented 2 months ago

I think that problem could be function isValidateableSelectComponent. The function does not check value of validation settings onlyAvailableItems but only existence of this property. Even though the component has disabled validation of onlyAvailableItems (validate.onlyAvailableItems = false), it still performs validation on the available values.

https://github.com/formio/core/blob/master/src/process/validation/rules/validateAvailableItems.ts#L17

function isValidateableSelectComponent(component: any): component is SelectComponent {
    return (
        component &&
        !!component.validate?.hasOwnProperty('onlyAvailableItems') &&     // probably should be !!component.validate?.onlyAvailableItems
        component.type === 'select' &&
        component.dataSrc !== 'resource'
    );
}
lane-formio commented 2 months ago

Have you attempted this with formiojs@4.19.1 and core@2.0.0?