Change in datetime equality behavior in @mui/x-date-pickers-pro >=5.0.6

[stem-ui]

Order ID 💳

58632

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

#6618

The above update which changes the method in which datetime equality is calculated. It now uses the rounded epoch second instead of the equality method of the date utils.

At Stem we use Luxon - Luxon equality takes into consideration the zone on its DateTime object. If we change the zone (e.g. through an accompanying zone selector component), this new equality check passes instead of fails, resulting in the rendered string not updating. Do you have any suggested workarounds? We are on MUI v5.

Thank you,
Roland

Your environment 🌎

`npx @mui/envinfo`

System: OS: macOS 12.5.1 Binaries: Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node Yarn: 1.22.15 - ~/.nvm/versions/node/v16.15.1/bin/yarn npm: 9.4.1 - ~/.nvm/versions/node/v16.15.1/bin/npm Browsers: Chrome: 109.0.5414.119 Edge: Not Found Firefox: 104.0.2 Safari: 15.6.1 npmPackages: @emotion/react: ^11.8.2 => 11.8.2 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.72 @mui/icons-material: ^5.5.1 => 5.5.1 @mui/lab: ^5.0.0-alpha.73 => 5.0.0-alpha.73 @mui/material: ^5.5.1 => 5.5.1 @mui/private-theming: 5.4.4 @mui/styled-engine: 5.5.2 @mui/styles: ^5.5.1 => 5.5.1 @mui/system: ^5.5.2 => 5.5.2 @mui/types: 7.1.3 @mui/utils: 5.11.7 @mui/x-data-grid: 5.17.21 @mui/x-data-grid-premium: ^5.17.21 => 5.17.21 @mui/x-data-grid-pro: 5.17.21 @mui/x-license-pro: 5.17.12 @types/react: 16.9.34 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: 4.8.4

[alexfauquette]

Effectively, it's a bug on our side. For other readers, here is a codesandbox highlighting the problem:

https://codesandbox.io/s/gracious-nash-hhplm1?file=/demo.tsx

Basically, when you modify timezone, the timestamp is is the same, so the diff is 0 (09:10:00 UTC and 02:10:00 at Los Angeles are the same)

A quick solution could be to use isEqual and getDiff and update as follow:

const areEqual = isEqual(prev, next)
if(areEqual){ return true; }

const diff = getDiff(prev, next) // diff in ms

if(diff === 0) { return areEqual; } // This correspond to the problem (not same date object but same timestamp)

reutrn diff > 999

---

I'm also wondering what happend when the locale is modifyed globally

[stem-ui]

Anything we can do to help here?

[alexfauquette]

@stem-ui thanks for the heads up. I opened a PR to confirm it solves the issue, and open a discussion about the strategy to solve it