search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.53k stars 1.32k forks source link

[DateTimePicker] Wrong tab indicator size #11964

Closed pascal-mormin closed 3 years ago

pascal-mormin commented 4 years ago

Environment

Tech Version
@material-ui/pickers 4.0.0-alpha.3
material-ui 4.6.1

Steps to reproduce

It seems there is a problem with TabIndicator size on DateTimePicker when opening dialog. I got this problem on my project but i can reproduce it on material-ui pickers site's demo.

1- Go to DateTime Picker basic usage example on the website 2- Open the dialog

The tab indicator (120px) don't take all the first tab size (160px). Switching to the hour size (2nd tab), tab indicator takes all the size. Switching to the first tab tab indicator now takes all the size (160px)

Expected behavior

Indicator takes all the tab width

Actual behavior

Indicator dont take all the tab width when opening dialog.

Live example

Try it on basic usage : material-ui pickers site's demo

Search keywords:

oliviertassinari commented 4 years ago

@pascal-mormin Thanks for the report, I confirm the issue:

Actual

Capture d’écran 2020-03-19 à 20 11 55

Expected

Capture d’écran 2020-03-19 à 20 12 03

I have already seen similar reports in the main repository. It's an issue with the display transition. A couple of solutions: 1. remove the Grow component, 2. force resize in a timeout, 3. implement https://github.com/mui-org/material-ui/issues/9337.

dmtrKovalenko commented 4 years ago

@oliviertassinari what you will suggest? Wait for or make PR in core or fix it in pickers?

oliviertassinari commented 4 years ago

@dmtrKovalenko 2. would be a reasonable compromise.

oliviertassinari commented 4 years ago

Another alternative would be to update the Grow transition, to match the one of the Menu: https://material.io/components/menus/#exposed-dropdown-menu. It changes the opacity and translation, there is no transformation involved. It might be the best one actually :).

ofekshalom commented 3 years ago

Hi 🙋‍♂️, I have the same problem when I use KeyboardDateTimePicker with dir=“rtl”. Is there a solution?

eps1lon commented 3 years ago

This is fixed in @mui-lab@5.0.0-alpha.49. Unclear when exactly it was fixed. Probably when implementing the new design.

bibi911110 commented 9 months ago

I also have the same issue using Tab of material ui.

oliviertassinari commented 9 months ago

@bibi0504 We should have solved this in the latest version of Material UI. We started to rely on ResizeObserver. https://github.com/mui/material-ui/pull/27791