From 2a405a8df6d6843c42ebd22c2df23088efd51e64 Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 28 Mar 2024 16:12:20 +0200 Subject: [PATCH] [DateRangePicker] Fix selection behavior with single input field when readonly (#12593) --- .../tests/DesktopDateRangePicker.test.tsx | 29 ++++++++++++ .../hooks/useEnrichedRangePickerFieldProps.ts | 2 +- .../hooks/useField/useFieldV6TextField.ts | 1 - ...ReadonlyDesktopDateRangePickerSingleV6.tsx | 16 +++++++ ...ReadonlyDesktopDateRangePickerSingleV7.tsx | 17 +++++++ test/e2e/index.test.ts | 46 +++++++++++++++++++ 6 files changed, 109 insertions(+), 2 deletions(-) create mode 100644 test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV6.tsx create mode 100644 test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV7.tsx diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx index d0238aae4a5e..0fef25da00a6 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx @@ -5,12 +5,14 @@ import { screen, fireEvent, userEvent, act, getByRole } from '@mui-internal/test import { createTheme, ThemeProvider } from '@mui/material/styles'; import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker'; import { DateRange, LocalizationProvider } from '@mui/x-date-pickers-pro'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { createPickerRenderer, adapterToUse, AdapterClassToUse, openPicker, getFieldSectionsContainer, + getTextbox, } from 'test/utils/pickers'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -87,6 +89,33 @@ describe('', () => { expect(screen.queryByText('Fim')).not.to.equal(null); }); + describe('Field slot: SingleInputDateRangeField', () => { + it('should add focused class to the field when it is focused', () => { + // test v7 behavior + const response = render( + , + ); + + const sectionsContainer = getFieldSectionsContainer(); + act(() => sectionsContainer.focus()); + + expect(sectionsContainer.parentElement).to.have.class('Mui-focused'); + + response.unmount(); + + // test v6 behavior + render(); + + const input = getTextbox(); + act(() => input.focus()); + + expect(input.parentElement).to.have.class('Mui-focused'); + }); + }); + describe('Component slot: Popper', () => { it('should forward onClick and onTouchStart', () => { const handleClick = spy(); diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index cba1ca9319b0..c9f7d22249b0 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -431,7 +431,7 @@ const useSingleInputFieldSlotProps = < ref: anchorRef, ...fieldProps?.InputProps, }, - focused: open, + focused: open ? true : undefined, ...(labelId != null && { id: labelId }), ...(wrapperVariant === 'mobile' && { readOnly: true }), // registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label` diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts index 4f8c89d11f41..5547dc9a047a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts @@ -196,7 +196,6 @@ export const useFieldV6TextField: UseFieldTextField = (params) => { const syncSelectionFromDOM = () => { if (readOnly) { - setSelectedSections(null); return; } const browserStartIndex = inputRef.current!.selectionStart ?? 0; diff --git a/test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV6.tsx b/test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV6.tsx new file mode 100644 index 000000000000..816f5326c378 --- /dev/null +++ b/test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV6.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; + +export default function ReadonlyDesktopDateRangePickerSingleV6() { + return ( + + + + ); +} diff --git a/test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV7.tsx b/test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV7.tsx new file mode 100644 index 000000000000..766693016800 --- /dev/null +++ b/test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV7.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; + +export default function ReadonlyDesktopDateRangePickerSingleV7() { + return ( + + + + ); +} diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts index 5da95c6441d9..97357460b867 100644 --- a/test/e2e/index.test.ts +++ b/test/e2e/index.test.ts @@ -803,6 +803,52 @@ async function initializeEnvironment( await page.waitForSelector('[role="tooltip"]', { state: 'detached' }); }); + + it('should have the same selection process when "readOnly" with single input v7 field', async () => { + // firefox in CI is not happy with this test + if (browserType.name() === 'firefox') { + return; + } + + await renderFixture('DatePicker/ReadonlyDesktopDateRangePickerSingleV7'); + + await page.locator(`.${pickersSectionListClasses.root}`).first().click(); + + // assert that the tooltip has been opened + await page.waitForSelector('[role="tooltip"]', { state: 'attached' }); + + await page.getByRole('gridcell', { name: '11' }).first().click(); + await page.getByRole('gridcell', { name: '13' }).first().click(); + + // assert that the tooltip closes after selection is complete + await page.waitForSelector('[role="tooltip"]', { state: 'detached' }); + + expect(await page.getByRole('textbox', { includeHidden: true }).inputValue()).to.equal( + '04/11/2022 – 04/13/2022', + ); + }); + + it('should have the same selection process when "readOnly" with single input v6 field', async () => { + // firefox in CI is not happy with this test + if (browserType.name() === 'firefox') { + return; + } + + await renderFixture('DatePicker/ReadonlyDesktopDateRangePickerSingleV6'); + + await page.getByRole('textbox').click(); + + // assert that the tooltip has been opened + await page.waitForSelector('[role="tooltip"]', { state: 'attached' }); + + await page.getByRole('gridcell', { name: '11' }).first().click(); + await page.getByRole('gridcell', { name: '13' }).first().click(); + + // assert that the tooltip closes after selection is complete + await page.waitForSelector('[role="tooltip"]', { state: 'detached' }); + + expect(await page.getByRole('textbox').inputValue()).to.equal('04/11/2022 – 04/13/2022'); + }); }); }); });