Closed adityapatil9191 closed 2 months ago
The sandbox link is not working. Can you share a new link?
Thanks. I am looking now.
I think this might be the problem:
warning.js:19 MUI X: The `renderInput` prop has been removed in version 6.0 of the Date and Time Pickers.
You can replace it with the `textField` component slot in most cases.
For more information, please have a look at the migration guide (https://mui.com/x/migration/migration-pickers-v5/#input-renderer-required-in-v5).
OK I found the issue. Date is a bit special and needs a different approach. I'll post a PR soon.
:tada: This issue has been resolved in version 3.23.3 :tada:
The release is available on
Scope: <DESCRIBE SCOPE OF THIS ISSUE, i.e.: PF4 mapper, Form renderer> I have a react component which needs to be conditionally shown only if Date picker has a valid value select. I am using condition : {when:"field-1", isNotEmpty:true} .
Description Please find the sandbox example for reference. const schema = { title: "IsNotEmpty condition", fields: [ { component: componentTypes.DATE_PICKER, name: "field-1", label: "Field 1", helperText: "To show field 2 write anything here!" }, { component: componentTypes.TEXT_FIELD, name: "field-2", label: "Field 2", initialValue: "I am shown!", isDisabled: true, condition: { when: "field-1", isNotEmpty: true } } ] };
Schema
import React from "react"; import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer"; import componentTypes from "@data-driven-forms/react-form-renderer/component-types"; import DatePicker from "@data-driven-forms/mui-component-mapper/date-picker"; import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import TextField from "@data-driven-forms/mui-component-mapper/text-field"; import FormTemplate from "@data-driven-forms/mui-component-mapper/form-template"; import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
const schema = { title: "IsNotEmpty condition", fields: [ { component: componentTypes.DATE_PICKER, name: "field-1", label: "Field 1", helperText: "To show field 2 write anything here!" }, { component: componentTypes.TEXT_FIELD, name: "field-2", label: "Field 2", initialValue: "I am shown!", isDisabled: true, condition: { when: "field-1", isNotEmpty: true } } ] };
const componentMapper = {
};
const IsNotEmpty = () => (
); IsNotEmpty.displayName = "Is not empty";
export default IsNotEmpty;
https://codesandbox.io/s/data-driven-forms-example-forked-z244xk?file=/src/App.js:0-1473