[pickers] DateCalendar issue with customized Dialog TransitionComponent

[laichak]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

DateCalendar issue with customized Dialog TransitionComponent.
It seems that using custom TransitionComponent in Dialog's animation is conflicting DateCalendar's animation.

Test code below (updated 8/25/2023):

import * as React from "react";
import Slide from "@mui/material/Slide";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
import { TransitionProps } from "@mui/material/transitions";
import { useTheme } from '@mui/material/styles';


const Transition = React.forwardRef<
  HTMLDivElement,
  TransitionProps & { children: any }
>(({ children, ...other }, ref) => (
  <Slide ref={ref} {...other} direction="up">
    {children}
  </Slide>
));

export default function BasicDateCalendar() {
  const theme = useTheme();

  const [dateSelected, setDateSelected] = React.useState();
  const [open_input_view, setInputViewOpen] = React.useState(false);

  const initialRender = React.useRef(true);

  React.useEffect(() => {
      if (initialRender.current) {
          initialRender.current = false;

          setTimeout(() => {
            React.startTransition(() => {
              setDateSelected(new Date());
              setInputViewOpen(true);
            });
          }, theme.transitions.duration.complex); 
      }
    }, [theme.transitions.duration.complex]);

  return (
    <React.Fragment>
      <Button onClick={() => setInputViewOpen(true)}>Open dialog</Button>
      <Dialog
        maxWidth="md"
        fullWidth
        open={open_input_view}
        onClose={() => setInputViewOpen(false)}
        TransitionComponent={Transition}
        keepMounted
      >
        <DialogContent>
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DateCalendar
              disableFuture
              value={dateSelected}
              onChange={(newDate) => setDateSelected(newDate)}
              views={["day"]}
            />
          </LocalizationProvider>
        </DialogContent>
      </Dialog>
    </React.Fragment>
  );
}

Current behavior 😯

MUI: A component is changing the uncontrolled value state of DateCalendar to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled DateCalendar element for the lifetime of the component.
The nature of the state is determined during the first render. It's considered controlled if the value is not undefined.
More info: https://fb.me/react-controlled-components

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID or Support key 💳 (optional)

No response

[LukasTy]

I've tried reproducing your use case in codesandbox.
Could you clarify where do you seem to have problems, because I was not able to see the error you are talking about. 🤷

[laichak]

Thank you for your response. I have edited the code in the first post.

[LukasTy]

Thank you for providing the updated code.
In your new example, there is a tiny error in the code.
You have this interesting behavior with a useEffect and timeout, which sets the open state and the current date value.

• Consider the need for this useEffect altogether as it seems that simply having the current date value set in the initial state and open on the dialog is enough. 🤔
• If the first option does not cover certain use cases and is still needed, please update the initial state of dateSelected to the correct empty value to signal that you are going to control the value, rather than providing nothing on the initial render.

- const [dateSelected, setDateSelected] = React.useState();
+ const [dateSelected, setDateSelected] = React.useState(null);