Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to select Storage for File Component #5508

Open
kirillmakhonin opened this issue Feb 11, 2024 · 5 comments
Open

Unable to select Storage for File Component #5508

kirillmakhonin opened this issue Feb 11, 2024 · 5 comments

Comments

@kirillmakhonin
Copy link

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:

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

Expected behavior
No error and storage is selected successfully

Screenshots
image

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
@kirillmakhonin kirillmakhonin mentioned this issue Feb 11, 2024
Open
7 tasks
@brendanbond
Copy link
Contributor

brendanbond commented Feb 12, 2024 •
edited

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
Copy link
Author

Hello @brendanbond
I've tried the fix #5509 and it looks like the issue in the component itself due to difference in selector values vs values for selectors

@brendanbond
Copy link
Contributor

brendanbond commented Feb 19, 2024 •
edited

@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
Copy link

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
Copy link
Contributor

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kirillmakhonin @brendanbond @maxenceyrowah