Condition isNot Empty does not work with MUI calendars.

adityapatil9191 commented 3 months ago

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

Hyperkid123 commented 2 months ago

The sandbox link is not working. Can you share a new link?

adityapatil9191 commented 2 months ago

Hyperkid123 commented 2 months ago

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).

Hyperkid123 commented 2 months ago

OK I found the issue. Date is a bit special and needs a different approach. I'll post a PR soon.

rvsia commented 2 months ago

:tada: This issue has been resolved in version 3.23.3 :tada:

The release is available on

Data-Driven-Forms.org!

data-driven-forms / react-forms

Condition isNot Empty does not work with MUI calendars. #1478