Unable to select Storage for File Component

kirillmakhonin commented 5 months ago

Describe the bug Unable to use "File Component" field due to error with validation of "Storage" field.

Version/Branch

├── @formio/core@2.0.0-rc.10
├── @formio/js@5.0.0-rc.39
├── @formio/react@5.3.1-dev.AvA08V.6
├── @formio/uswds@2.5.1
├── formiojs@4.19.0

To Reproduce Steps to reproduce the behavior:

Install Formio JS and create form builder
Create a file component
Go to File section and select any storage
See error "Storage is an invalid value."

Expected behavior No error and storage is selected successfully

Screenshots

Additional context Source files:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

// Include Bootstrap CSS
// import uswds from '@formio/uswds';

import { FormBuilder, Templates } from '@formio/react';
// import uswds from '@formio/uswds';
import '@formio/uswds/dist/uswds.min.css';
import '@formio/js/dist/formio.full.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
// import { Formio, Providers } from 'formiojs';

// Templates.addTemplate('uswds', uswds);

window.renderFormBuilder = (
  elementName: string,
  options: any
) => {  
  const textarea = document.getElementById('id_' + elementName) as HTMLTextAreaElement;
  const editor = document.getElementById(elementName + '_editor') as HTMLElement;

  const root = ReactDOM.createRoot(editor);

  root.render(
    <React.StrictMode>
      <FormBuilder
        form={textarea.value}
        options={options}
        onChange={(schema: any) => {
          textarea.value = JSON.stringify(schema, null, 2);
          console.log('Form Builder Schema:', textarea.value);
        }}
      />
    </React.StrictMode>
  );  
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>FORM Examples</title>
  </head>
  <body>
    <div id="test1_editor" style="width: 100%"></div>
    <textarea id="id_test1" name="test1" required="" style="display: none"></textarea>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        window.renderFormBuilder(
          "test1",
          {}
        );
      });
    </script>
  </body>
</html>

Suspection I suspect the problem is in file https://github.com/formio/formio.js/blob/master/src/components/file/editForm/File.edit.file.js#L5-L23

It looks like if valueProperty: 'value', is used, then _.map should return only key and not an object

brendanbond commented 5 months ago

Hey @kirillmakhonin thanks for reporting this. Are we certain that the issue is in the file component itself? I suspect that this is a regression in the specific validation around select components (if only because the file component's form definition hasn't changed in a long time) - we'll take a look at this ASAP

kirillmakhonin commented 5 months ago

Hello @brendanbond I've tried the fix https://github.com/formio/formio.js/pull/5509 and it looks like the issue in the component itself due to difference in selector values vs values for selectors

brendanbond commented 5 months ago

@kirillmakhonin my apologies, @formio/react@5.3.1-dev.AvA08V.6 was an internal developer version that somehow slipped through to become latest. I've corrected the error.

Also, you're using formiojs v 4.x, which means you don't really need some of those other peer dependencies, namely @formio/core and @formio/js, which comprise the 5.x renderer. Can you try reproducing in the latest stable versions (so @formio/react@5.3.0 and formiojs@4.18.0) and let us know if you run into this issue?

If you're into the idea of trying a release candidate, don't use the formiojs dependency and use the latest rc versions of @formio/js and @formio/core (which should go just fine with @formio/react@5.3.0).

maxenceyrowah commented 3 months ago

Hello, @brendanbond I'm currently using the "@formio/angular": "^7.5.0-rc.2" "@formio/js": "^5.0.0-rc.42" versions and I'm experiencing a problem with the "File" component. I noticed that a merge request has been opened on GitHub regarding this issue (https://github.com/formio/formio.js/pull/5509). I'd like to know what progress has been made in resolving this issue. Could you give me an estimate of how long it will take to fix this bug and release a new version? Thank you in advance for your reply.

brendanbond commented 3 months ago

@maxenceyrowah @kirillmakhonin I am unable to reproduce this using a trivial minimal builder example. Can one of you post a CodeSandbox or something similar (JSFiddle, etc.) that has a reproduction? Thanks

formio / formio.js

Unable to select Storage for File Component #5508