diff --git a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx index fafafc44a61e5..e8c14bec734d2 100644 --- a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx @@ -7,6 +7,7 @@ import { getTextbox, describeAdapters, expectFieldValueV6, + getCleanedSelectedContent, } from 'test/utils/pickers'; import { fireUserEvent } from 'test/utils/fireUserEvent'; @@ -1054,12 +1055,47 @@ describe(' - Editing', () => { keyStrokes: [{ value: '1', expected: '2022' }], }); }); + + it('should reset the select "all" state when typing a digit', () => { + // Test with accessible DOM structure + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + + view.selectSection('month'); + // select all sections + fireEvent.keyDown(view.getActiveSection(0), { + key: 'a', + keyCode: 65, + ctrlKey: true, + }); + expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); + + view.pressKey(null, '1'); + expect(getCleanedSelectedContent()).to.equal('01'); + + view.unmount(); + + // Test with non-accessible DOM structure + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + + view.selectSection('month'); + const input = getTextbox(); + // select all sections + fireEvent.keyDown(input, { + key: 'a', + keyCode: 65, + ctrlKey: true, + }); + expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); + + fireEvent.change(input, { target: { value: '1/DD/YYYY' } }); + expect(getCleanedSelectedContent()).to.equal('01'); + }); }); describeAdapters( 'Letter editing', DateField, - ({ adapter, testFieldChange, testFieldKeyPress }) => { + ({ adapter, testFieldChange, testFieldKeyPress, renderWithProps }) => { it('should select the first matching month with no previous query and no value is provided (letter format)', () => { testFieldChange({ format: adapter.formats.month, @@ -1140,6 +1176,41 @@ describe(' - Editing', () => { expectedValue: 'June', }); }); + + it('should reset the select "all" state when typing a letter', () => { + // Test with accessible DOM structure + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + + view.selectSection('month'); + // select all sections + fireEvent.keyDown(view.getActiveSection(0), { + key: 'a', + keyCode: 65, + ctrlKey: true, + }); + expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); + + view.pressKey(null, 'j'); + expect(getCleanedSelectedContent()).to.equal(adapter.lib === 'luxon' ? '1' : '01'); + + view.unmount(); + + // Test with non-accessible DOM structure + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + + view.selectSection('month'); + const input = getTextbox(); + // select all sections + fireEvent.keyDown(input, { + key: 'a', + keyCode: 65, + ctrlKey: true, + }); + expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); + + fireEvent.change(input, { target: { value: 'j/DD/YYYY' } }); + expect(getCleanedSelectedContent()).to.equal(adapter.lib === 'luxon' ? '1' : '01'); + }); }, ); diff --git a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx index 6ef20dec53f36..f72f3247f6521 100644 --- a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx @@ -282,6 +282,43 @@ describe(' - Selection', () => { fireEvent.keyDown(input, { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); }); + + it('should select the next section when editing after all the sections were selected', () => { + // Test with accessible DOM structure + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + view.selectSection('month'); + + // Select all sections + fireEvent.keyDown(view.getActiveSection(0), { + key: 'a', + keyCode: 65, + ctrlKey: true, + }); + expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); + + fireEvent.keyDown(view.getSectionsContainer(), { key: 'ArrowDown' }); + expect(getCleanedSelectedContent()).to.equal('12'); + + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' }); + expect(getCleanedSelectedContent()).to.equal('DD'); + + view.unmount(); + + // Test with non-accessible DOM structure + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + const input = getTextbox(); + view.selectSection('month'); + + // Select all sections + fireEvent.keyDown(input, { key: 'a', keyCode: 65, ctrlKey: true }); + expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); + + fireEvent.keyDown(input, { key: 'ArrowDown' }); + expect(getCleanedSelectedContent()).to.equal('12'); + + fireEvent.keyDown(input, { key: 'ArrowRight' }); + expect(getCleanedSelectedContent()).to.equal('DD'); + }); }); describe('key: ArrowLeft', () => { diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index c271f2a4f42b6..28f515046831e 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -194,6 +194,11 @@ export const useField = < break; } + // if all sections are selected, mark the currently editing one as selected + if (parsedSelectedSections === 'all') { + setSelectedSections(activeSectionIndex); + } + const activeSection = state.sections[activeSectionIndex]; const activeDateManager = fieldValueManager.getActiveDateManager( utils, 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 b882e0c56f942..f6e06c6d6c04b 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts @@ -332,6 +332,10 @@ export const useFieldV6TextField: UseFieldTextField = (params) => { const valueStr = shouldUseEventData ? eventData : targetValue; const cleanValueStr = cleanString(valueStr); + if (parsedSelectedSections === 'all') { + setSelectedSections(activeSectionIndex); + } + // If no section is selected or eventData should be used, we just try to parse the new value // This line is mostly triggered by imperative code / application tests. if (activeSectionIndex == null || shouldUseEventData) { diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts index c6fc37752e6ec..f56d247343349 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts @@ -233,6 +233,9 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { } else if (keyPressed.length > 1) { updateValueFromValueStr(keyPressed); } else { + if (parsedSelectedSections === 'all') { + setSelectedSections(0); + } applyCharacterEditing({ keyPressed, sectionIndex: 0,