Rjsf-team from React-jsonschema-form Repository

Apache License 2.0

Closed
Custom field onchange not working with oneOf #3158

Issue Opened
Rkxhs02 Opened Issue On Sep 29th 2022, 12:02

Rkxhs02

Prerequisites

What theme are you using?

core

Version

4.1.1

Current Behavior

OnChange is used in the custom field, but the formdata does not change.

If you remove oneOf and add items to property, it works correctly.

In the "react-jsonschema-form" package, oneOf works correctly.

import React, { useEffect, useState } from "react";
import Form from "@rjsf/core";
// import Form from "react-jsonschema-form"

const schema = {
  type: "object",
  properties: {
    // items: {
    //   type: "array"
    // },
    itemType: {
      type: "string",
      enum: ["A", "B"],
      default: "A"
    }
  },
  dependencies: {
    itemType: {
      oneOf: [
        {
          properties: {
            itemType: {
              enum: ["A"]
            }
          }
        },
        {
          properties: {
            itemType: {
              enum: ["B"]
            },
            items: {
              type: "array"
            }
          }
        }
      ]
    }
  }
};
const uiSchema = {
  items: {
    "ui:field": "CustomField"
  }
};

const defaultFormData = {
  itemType: "B",
  items: ["1", "2"]
};

const CustomField = (props) => {
  const { formData = [], onChange } = props;
  const [options, setOptions] = useState([]);

  useEffect(() => {
    setOptions(formData);
  }, []);

  useEffect(() => {
    console.log(options);
    onChange(options);
  }, [options]);

  return <div>{JSON.stringify(formData)}</div>;
};

const fields = {
  CustomField
};

export default function App() {
  const [formData, setFormData] = useState({});

  useEffect(() => {
    setFormData(defaultFormData);
  }, []);

  const handleOnChange = (e) => {
    setFormData(e.formData);
  };

  return (
    <Form
      onChange={handleOnChange.bind(this)}
      formData={formData}
      schema={schema}
      fields={fields}
      uiSchema={uiSchema}
    />
  );
} 

https://codesandbox.io/s/suspicious-tree-3trwfx?file=/src/App.js

Expected Behavior

The form data must be output ["1", "2"].

Steps To Reproduce

No response

Environment

- OS:
- Node:
- npm: 

Anything else?

No response

Comment
Heath-freenome commented on 2 months ago

Heath-freenome

@rkxhs02 Can you test this with the v5 beta?

Comment
Rkxhs02 commented on 2 months ago

Rkxhs02

@heath-freenome It seems to work well with v5 beta.

https://codesandbox.io/s/angry-bell-fjhj9c?file=/src/App.js

Comment
Heath-freenome commented on 2 months ago

Heath-freenome

So we can close this issue now?

Comment
Rkxhs02 commented on 2 months ago

Rkxhs02

Yes I will close the issue.

About Repository

A React component for building Web forms from JSON Schema.
Language: TypeScript
Star: 12070
Fork: 1990
Watchers: 12070
Open Issues: 388
https://github.com/rjsf-team/react-jsonschema-form
Apache License 2.0
Last updated: 05 Dec 2022
Tropics: