From 13f286c79220c7c17b5799e4bfe517048d2531d0 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Tue, 4 Jun 2024 17:54:35 +0300
Subject: [PATCH] [pickers] Fix `AdapterDayjs` timezone behavior (#13362)

---
 docs/data/date-pickers/timezone/timezone.md   |  4 ++--
 .../src/AdapterDayjs/AdapterDayjs.ts          |  7 ++++--
 .../SingleDesktopDateRangePickerWithTZ.tsx    | 23 +++++++++++++++++++
 test/e2e/index.test.ts                        | 22 ++++++++++++++++++
 4 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 test/e2e/fixtures/DatePicker/SingleDesktopDateRangePickerWithTZ.tsx

diff --git a/docs/data/date-pickers/timezone/timezone.md b/docs/data/date-pickers/timezone/timezone.md
index fc1b7ecbd815..a095bfc9a124 100644
--- a/docs/data/date-pickers/timezone/timezone.md
+++ b/docs/data/date-pickers/timezone/timezone.md
@@ -190,7 +190,7 @@ Please check out the documentation of the [UTC and timezone on Luxon](https://mo
 You can then pass your UTC date to your picker:
 
 ```tsx
-import { DateTime, Settings } from 'luxon';
+import { DateTime } from 'luxon';
 
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -240,7 +240,7 @@ Please check out the documentation of the [UTC and timezone on Luxon](https://mo
 You can then pass your date in the wanted timezone to your picker:
 
 ```tsx
-import { DateTime, Settings } from 'luxon';
+import { DateTime } from 'luxon';
 
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts
index 81e32479c038..47221a9ac21b 100644
--- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts
+++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts
@@ -280,8 +280,11 @@ export class AdapterDayjs implements MuiPickersAdapter<Dayjs, string> {
       if ((fixedValue.$offset ?? 0) === (value.$offset ?? 0)) {
         return value;
       }
-
-      return fixedValue;
+      // Change only what is needed to avoid creating a new object with unwanted data
+      // Especially important when used in an environment where utc or timezone dates are used only in some places
+      // Reference: https://github.com/mui/mui-x/issues/13290
+      // @ts-ignore
+      value.$offset = fixedValue.$offset;
     }
 
     return value;
diff --git a/test/e2e/fixtures/DatePicker/SingleDesktopDateRangePickerWithTZ.tsx b/test/e2e/fixtures/DatePicker/SingleDesktopDateRangePickerWithTZ.tsx
new file mode 100644
index 000000000000..0f920bf2aa9b
--- /dev/null
+++ b/test/e2e/fixtures/DatePicker/SingleDesktopDateRangePickerWithTZ.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export default function BasicDesktopDateRangePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateRangePicker
+        enableAccessibleFieldDOMStructure
+        slots={{ field: SingleInputDateRangeField }}
+        defaultValue={[dayjs('2024-04-12'), dayjs('2024-04-14')]}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index 3aded68ad784..ea00f52f8c1c 100644
--- a/test/e2e/index.test.ts
+++ b/test/e2e/index.test.ts
@@ -1009,6 +1009,28 @@ async function initializeEnvironment(
 
         expect(await page.getByRole('textbox').inputValue()).to.equal('04/11/2022 – 04/13/2022');
       });
+
+      it('should not change timezone when changing the start date from non DST to DST', async () => {
+        // firefox in CI is not happy with this test
+        if (browserType.name() === 'firefox') {
+          return;
+        }
+        const thrownErrors: string[] = [];
+        context.on('weberror', (webError) => {
+          thrownErrors.push(webError.error().message);
+        });
+
+        await renderFixture('DatePicker/SingleDesktopDateRangePickerWithTZ');
+
+        // open the picker
+        await page.getByRole('group').click();
+
+        await page.getByRole('spinbutton', { name: 'Month' }).first().press('ArrowDown');
+
+        expect(thrownErrors).not.to.contain(
+          'MUI X: The timezone of the start and the end date should be the same.',
+        );
+      });
     });
   });
 });