[fields] Reset all selected state on section edit (@LukasTy) (#16232)

Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>
mui · Jan 17, 2025 · eac73b7 · eac73b7
1 parent 3dd2dfe
commit eac73b7
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 1 deletion.
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
@@ -7,6 +7,7 @@ import {
   getTextbox,
   describeAdapters,
   expectFieldValueV6,
+  getCleanedSelectedContent,
 } from 'test/utils/pickers';
 import { fireUserEvent } from 'test/utils/fireUserEvent';
 
@@ -1054,12 +1055,47 @@ describe('<DateField /> - 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('<DateField /> - 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
@@ -282,6 +282,43 @@ describe('<DateField /> - 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
@@ -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
@@ -332,6 +332,10 @@ export const useFieldV6TextField: UseFieldTextField<false> = (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
@@ -233,6 +233,9 @@ export const useFieldV7TextField: UseFieldTextField<true> = (params) => {
     } else if (keyPressed.length > 1) {
       updateValueFromValueStr(keyPressed);
     } else {
+      if (parsedSelectedSections === 'all') {
+        setSelectedSections(0);
+      }
       applyCharacterEditing({
         keyPressed,
         sectionIndex: 0,