[data grid] Date filtering with negative timezone offset

[elawad]

Steps to reproduce

Demo: https://mui.com/x/react-data-grid/column-definition/#column-types

Steps:

1. Set your time zone to EST -4, or any negative offset.
2. On demo DataGrid, filter by dateCreated.
3. Select any date in Filter panel.
4. Date changes to previous.

Current behavior

Filter by Date changes to previous day.

Expected behavior

Date stays as what was selected in Filter.

Context

No response

Your environment

npx @mui/envinfo

  Tested on both Chrome/Safari.

  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 123.0.6312.122
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.0 => 11.11.4
    @emotion/styled: ^11.11.0 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.15
    @mui/icons-material: ^5.15.0 => 5.15.15
    @mui/material: ^5.15.0 => 5.15.15
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/styles: ^5.15.0 => 5.15.15
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-data-grid:  7.2.0
    @mui/x-data-grid-pro: ^7.2.0 => 7.2.0
    @mui/x-license:  7.2.0
    @types/react:  18.2.78
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0

Search keywords: data grid filter date time zone
Order ID: 79011

[michelengelen]

Hey @elawad
Could you please provide a working example of this in a sandbox?
From what I know you are not able to set your browser timezone manually, right @LukasTy?

[LukasTy]

From what I know you are not able to set your browser timezone manually, right LukasTy?

If we are talking about native date inputs, that is in total control of the browser and yes, if I'm not mistaken, it will always use the host timezone. 🤔

Set your time zone to EST -4, or any negative offset.

@elawad How do you do that? 🤔

[elawad]

Hi I’ll provide a sample shortly. But it’s the same as the demo above.

You can change your timezone in your mac/pc settings.

I’m already on EST, but I was able to test other time zones as well.

[elawad]

Example: https://codesandbox.io/p/sandbox/recursing-scooby-5jfdzx

Issue when using UTC -4 EST
Works when using UTC +1 BST

Was working in v6. Might be related to this release, where Filter now uses a Date object.
https://github.com/mui/mui-x/releases/tag/v7.0.0-alpha.6

DataGrid-Filter-Date-EST-Bug.mov

[michelengelen]

That actually makes sense. The dates are probably rendered with values that represent the local timezone (UTC+1) and when clicked it will deduct the offset, which will result in the day before.

@LukasTy can you test this? I could also test this later today (I need to update MacOS anyways).

[michelengelen]

Hey ... I just did some digging and the problem is as I suspected: We do perform some calculation with the timezoneOffset and that backfired a bit.

Here is a diff with a potential fix

--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
@@ -29,14 +29,14 @@ function convertFilterItemValueToInputValue(
   if (Number.isNaN(dateCopy.getTime())) {
     return '';
   }
-  // The date picker expects the date to be in the local timezone.
-  // But .toISOString() converts it to UTC with zero offset.
-  // So we need to subtract the timezone offset.
-  dateCopy.setMinutes(dateCopy.getMinutes() - dateCopy.getTimezoneOffset());
   if (inputType === 'date') {
     return dateCopy.toISOString().substring(0, 10);
   }
   if (inputType === 'datetime-local') {
+    // The date picker expects the date to be in the local timezone.
+    // But .toISOString() converts it to UTC with zero offset.
+    // So we need to subtract the timezone offset.
+    dateCopy.setMinutes(dateCopy.getMinutes() - dateCopy.getTimezoneOffset());
     return dateCopy.toISOString().substring(0, 19);
   }
   return dateCopy.toISOString().substring(0, 10);
@@ -73,6 +73,9 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
       setIsApplying(true);
       filterTimeout.start(rootProps.filterDebounceMs, () => {
         const date = new Date(value);
+        if (type === 'date') {
+          date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
+        }
         applyValue({ ...item, value: Number.isNaN(date.getTime()) ? undefined : date });
         setIsApplying(false);
       });

I will mark this as a good first issue since this is fairly easy to fix.
Objections @cherniavskii ?

[michelengelen]

Here is a quick recording of the filtering with the fix I just posted:

Screen.Recording.2024-04-18.at.10.08.16.mov

[elawad]

@michelengelen In your video at 0:07 mark:
You selected Apr 18th, but then it flickers quickly to the 17th.

[cherniavskii]

Hey @elawad
I've opened a PR with the fix #12836
You can give it a try in the preview deployment: https://deploy-preview-12836--material-ui-x.netlify.app/x/react-data-grid/column-definition/#column-types

[elawad]

Thanks @cherniavskii Looks good on initial testing!

I'll run through some tests to ensure date/time works as intended.

[cherniavskii]

@elawad Thanks! 🤝

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@elawad: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.