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,