Not able to render date picker component for MUI

[YashM10]

scope: MUI
code:

import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
import componentMapper from '@data-driven-forms/mui-component-mapper/component-mapper';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import componentTypes from '@data-driven-forms/react-form-renderer/component-types/component-types';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { useEffect, useState } from 'react';
import { injectIntl } from 'react-intl';


const DynamicForm = () => {
  const [schema1, setSchema1] = useState<any>({});
  const schema3 = {
    fields: [
      {
        component: componentTypes.TEXT_FIELD,
        name: 'account_name',
        label: 'Account Name',
        FormFieldGridProps: { xs: 4, p: 2 },
      },
      {
        component: componentTypes.SELECT,
        name: 'contract_length',
        label: 'Contract Length',
        FormFieldGridProps: { xs: 4, p: 2 },
        options: [
          {
            label: 'Days',
            value: 'days',
          },
          {
            label: 'Weeks',
            value: 'weeks',
          },
          {
            label: 'Months',
            value: 'months',
          },
          {
            label: 'Years',
            value: 'years',
          },
        ],
        isSearchable: true,
        isClearable: true,
      },
      {
        component: componentTypes.SELECT,
        name: 'billing_frequency',
        label: 'Billing Frequency',
        FormFieldGridProps: { xs: 4, p: 2 },
        options: [
          {
            label: 'Weekly',
            value: 'weekly',
          },
          {
            label: 'Monthly',
            value: 'monthly',
          },
          {
            label: 'Yearly',
            value: 'yearly',
          },
        ],
        isSearchable: true,
        isClearable: true,
      },
      {
        component: componentTypes.SELECT,
        name: 'payment_terms',
        label: 'Payment Terms',
        FormFieldGridProps: { xs: 4, p: 2 },
      },
      {
        component: componentTypes.SELECT,
        name: 'dummy',
        label: 'Payment Terms Dummy',
        FormFieldGridProps: { xs: 4, p: 2 },
      },
      {
        component: componentTypes.DATE_PICKER,
        name: 'contract_start',
        label: 'Contract Start',
        FormFieldGridProps: { xs: 3 },
        isClearable: true,
      },
    ],
  };
  useEffect(() => {
    setSchema1(schema3);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const schema2 = {
    fields: [
      {
        component: componentTypes.FIELD_ARRAY,
        name: 'new_terms',
        fieldKey: 'field_array',
        title: 'New Terms',
        label: 'New Terms',
        FormFieldGridProps: { xs: 12 },
        itemDefault: {
          name: 'Enter field key',
          label: 'Enter field label',
          component: '',
          initalValue: 'Enter default value',
          options: '',
        },
        fields: [
          {
            component: componentTypes.TEXT_FIELD,
            name: 'name',
            label: 'Key',
            FormFieldGridProps: { xs: 4, p: 2 },
          },
          {
            component: componentTypes.TEXT_FIELD,
            name: 'label',
            label: 'Label',
            FormFieldGridProps: { xs: 4, p: 2 },
          },
          {
            component: componentTypes.SELECT,
            name: 'component',
            label: 'Type',
            FormFieldGridProps: { xs: 4, p: 2 },
            options: [
              {
                label: 'Text Field',
                value: 'text-field',
              },
              {
                label: 'Select',
                value: 'select',
              },
              {
                label: 'Checkbox',
                value: 'checkbox',
              },
              {
                label: 'Radio Button',
                value: 'radio',
              },
              {
                label: 'Date Picker',
                value: 'date-picker',
              },
            ],
            isSearchable: true,
            isClearable: true,
          },
          {
            component: componentTypes.TEXT_FIELD,
            name: 'initialValue',
            label: 'Default Value',
            FormFieldGridProps: { xs: 4, p: 2 },
          },
          {
            component: componentTypes.TEXT_FIELD,
            name: 'options',
            label: 'Options',
            placeholder: 'Please enter comma separated values',
            condition: {
              when: `new_terms[0].component`,
              is: 'select',
            },
            FormFieldGridProps: { xs: 4, p: 2 },
          },
        ],
      },
    ],
  };
  const onSubmit2 = (values: any, form: any) => {
    if (values.new_terms?.length) {
      console.log(values.new_terms[0], form, schema1);
      console.log([...schema1.fields, values.new_terms[0]]);
      const outputData = values.new_terms.map((newTerm: any) => {
        return { ...newTerm, FormFieldGridProps: { xs: 4, p: 2 } };
      });
      setSchema1({
        fields: [...schema1.fields, ...outputData],
      });
      form.reset();
    }
  };
  const onSubmit1 = (values: any) => {
    console.log(values);
  };
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      {schema1?.fields?.length ? (
        <FormRenderer
          schema={schema1}
          FormTemplate={FormTemplate}
          componentMapper={componentMapper}
          onSubmit={onSubmit1}
        />
      ) : null}

      <br />
      <FormRenderer
        componentMapper={componentMapper}
        schema={schema2}
        FormTemplate={FormTemplate}
        onSubmit={onSubmit2}
      />
    </LocalizationProvider>
  );
};

export default injectIntl(DynamicForm);

error: Can not find utils in context. It looks like you forgot to wrap your component in LocalizationProvider, or pass dateAdapter prop directly.

[Hyperkid123]

@YashM10 Are there any additional steps to reproduce the issue? I am able to render the form with the date picker.

I used the schema you posted, and just added a parent IntlProvider context. That is the only extra thing added. Can you tell us what version of MUI, DDF, and the date pickers libraries you are using?

[kelvingo935]

I'm having the same issue. I have tried directly using the DatePicker component in my code, and it's working fine. However, the problem occurs when I use DDF to render the form.

packages.json

    "@data-driven-forms/mui-component-mapper": "^3.21.4",
    "@data-driven-forms/react-form-renderer": "^3.21.4",
    "@mui/material": "^5.14.9",
    "@mui/x-date-pickers": "^6.13.0",

index.tsx (I have already wrapped with LocalizationProvider on the global app)

<React.StrictMode>
    <ThemeProvider theme={darkTheme}>
        <LocalizationProvider dateAdapter={AdapterLuxon}>
            <App />
        </LocalizationProvider>
    </ThemeProvider>
</React.StrictMode>

[YashM10]

@YashM10 Are there any additional steps to reproduce the issue? I am able to render the form with the date picker.

I used the schema you posted, and just added a parent IntlProvider context. That is the only extra thing added. Can you tell us what version of MUI, DDF, and the date pickers libraries you are using?

So found out the issue here
The issue is because of the mui/x-date-pickers version.
I was using version 6.10.1 which gives the error, but on downgrading the version to 5.0.20, it seems to work but with the older version of date picker

[YashM10]

Also then we need to change the implementation of date pickers used everywhere else.

[Hyperkid123]

OK Thanks for the details. I'll play around with the versions to reproduce the bug. I'll let you know ASAP..

[Hyperkid123]

@kelvingo935 @YashM10 OK I think the issue is with a duplicate version of the date pickers dependencies. DDF has the date picker as a dependency, not a peer dependency which probably resulted in a module resolution conflict and the date picker was not able to reach the parent context of LocalizationProvider as it was technically imported from a different package (the explicitly installed in your apps) than the date picker component itself (nested dependency of DDF).

Moving the date pickers to peer dependency and relaxing the version restrictions should do the trick. I'll do some more testing to exactly replicate your use cases. If all goes well I'll open a PR soon.

[Hyperkid123]

A new version should be released soon. I'll keep the issue opened until I get thumbs up from you.

[rvsia]

🎉 This issue has been resolved in version 3.21.5 🎉

The release is available on

• react-form-renderer (@latest dist-tag)

• ant-component-mapper (@latest dist-tag)

• blueprint-component-mapper (@latest dist-tag)

• carbon-component-mapper (@latest dist-tag)

• mui-component-mapper (@latest dist-tag)

• pf4-component-mapper (@latest dist-tag)

• suir-component-mapper (@latest dist-tag)

Data-Driven-Forms.org!

[YashM10]

Thank you for the update!