[pickers] Popper content is empty on `DateTimePicker` when using custom layout

gabrielbuii commented 7 months ago

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-uplzu1?file=Demo.tsx

Steps:

Use the same CustomLayout as here: https://mui.com/x/react-date-pickers/custom-layout/#dom-customization
Open up the first date time picker
Empty content

Current behavior

Expected behavior

To render the date time picker with my custom layout

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish) Binaries: Node: 21.6.0 - ~/.nvm/versions/node/v21.6.0/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v21.6.0/bin/npm pnpm: Not Found Browsers: Chrome: 124.0.6367.60 npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.32 @mui/core-downloads-tracker: 5.15.5 @mui/icons-material: ^5.15.5 => 5.15.5 @mui/lab: ^5.0.0-alpha.161 => 5.0.0-alpha.161 @mui/material: ^5.15.5 => 5.15.5 @mui/private-theming: 5.15.5 @mui/styled-engine: 5.15.5 @mui/system: 5.15.5 @mui/types: 7.2.13 @mui/utils: 5.15.5 @mui/x-data-grid: ^6.19.4 => 6.19.4 @mui/x-date-pickers: 7.1.1 => 7.1.1 @mui/x-tree-view: ^6.17.0 => 6.17.0 @types/react: ^18.2.48 => 18.2.48 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.3.3 => 5.3.3 ```

Search keywords: empty

noraleonte commented 7 months ago

Hey @gabrielbuii 👋

It seems to be a css issue. The PickersLayoutContentWrapper on the DateTimePicker should have display: 'grid', and it should solve your issue I think. Something like:

function CustomLayout(
  props: PickersLayoutProps<Dayjs | null, Dayjs, DateOrTimeViewWithMeridiem>,
) {
  const { toolbar, tabs, content, actionBar } = usePickerLayout(props);

  return (
    <PickersLayoutRoot ownerState={props}>
      {toolbar}
      {actionBar}
      <PickersLayoutContentWrapper
        sx={{ display: 'grid' }}
        className={pickersLayoutClasses.contentWrapper}
      >
        {tabs}
        {content}
      </PickersLayoutContentWrapper>
    </PickersLayoutRoot>
  );
}

Let me know if this helps 👌

gabrielbuii commented 7 months ago

Hi @noraleonte!

Ah yeah, that fixed it! :+1: Aprreciate the fast reply! Thanks!

gabrielbuii commented 7 months ago

@noraleonte One more thing. Not sure if it's related to this issue though.

If I want to render the multi section digital clock on mobile using this code:

viewRenderers={{ minutes: renderMultiSectionDigitalClockTimeView, hours: renderMultiSectionDigitalClockTimeView, }}

The digital clock and the tabs are misaligned:

I was able to fix it by changing the gridColumn to gridColumn: 2 / 4 on PickersLayoutContentWrapper though.

michelengelen commented 7 months ago

@noraleonte should we add this to the board to adjust the class definition (or at least the demo)?

noraleonte commented 7 months ago

@gabrielbuii At a first glance, the second problem also seems to be a css one, but I'll check and get back to you 👌

@michelengelen I think we can add it to the board to at least improve the demos with custom layout for date & time pickers 🤔

gabrielbuii commented 7 months ago

@noraleonte @michelengelen Thanks! Appreciate it! ^^

One more thing though, that doesn't seem to be css related.

If I switch between the day and hours tabs on mobile, there is this error in the console:

This only seems to happen on mobile while using

viewRenderers={{ minutes: renderMultiSectionDigitalClockTimeView, hours: renderMultiSectionDigitalClockTimeView, }}

Try to refresh the page and then switch between tabs if you don't see the error.

noraleonte commented 7 months ago

@gabrielbuii It would be super helpful if you could provide a reproduction case, in stackblitz or codesandbox 🙏 I am not able to reproduce this issue 😬

gabrielbuii commented 7 months ago

@noraleonte

link: https://stackblitz.com/edit/react-uplzu1-goqhsv?file=Demo.tsx

video:

https://github.com/mui/mui-x/assets/133883077/1c7016f2-6672-4eb7-9dfc-5c6a8e9dfc0f

I think this is only reproducible if you try it after a page refresh.

noraleonte commented 7 months ago

@gabrielbuii the visual bug you are getting is a css issue 😄 here's a fix

The warning seems to be from TS, not sure why tbh. Maybe @LukasTy has an idea?

gabrielbuii commented 6 months ago

@noraleonte Another small thing that I've just discovered:

If we set adapterLocale="en" and then click on AM or PM in the digital clock section, it switches to the year view for some reason.