[TimePicker] Handle Space and Enter on TimeClock component (#14151

) Co-authored-by: Arthur Balduini <arthurbalduini@Arthurs-MacBook-Pro.local>
mui · Aug 22, 2024 · a270b3d · a270b3d
1 parent c94b26d
commit a270b3d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx
@@ -332,6 +332,11 @@ export function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>)
         handleValueChange(viewValue - keyboardControlStep, 'partial');
         event.preventDefault();
         break;
+      case 'Enter':
+      case ' ':
+        handleValueChange(viewValue, 'finish');
+        event.preventDefault();
+        break;
       default:
       // do nothing
     }

diff --git a/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx b/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx
@@ -139,6 +139,47 @@ describe('<TimeClock />', () => {
     expect(reason).to.equal('partial');
   });
 
+  [
+    {
+      keyName: 'Enter',
+      keyValue: 'Enter',
+    },
+    {
+      keyName: 'Space',
+      keyValue: ' ',
+    },
+  ].forEach(({ keyName, keyValue }) => {
+    it(`sets value on ${keyName} press`, () => {
+      const handleChange = spy();
+      render(
+        <TimeClock
+          autoFocus
+          defaultValue={adapterToUse.date('2019-01-01T04:20:00')}
+          onChange={handleChange}
+        />,
+      );
+      const listbox = screen.getByRole('listbox');
+
+      fireEvent.keyDown(listbox, { key: 'ArrowDown' });
+      fireEvent.keyDown(listbox, { key: keyValue });
+
+      expect(handleChange.callCount).to.equal(2);
+      let [newDate, reason] = handleChange.lastCall.args;
+
+      expect(adapterToUse.getHours(newDate)).to.equal(3);
+      expect(reason).to.equal('partial');
+
+      fireEvent.keyDown(listbox, { key: 'ArrowUp' });
+      fireEvent.keyDown(listbox, { key: keyValue });
+
+      expect(handleChange.callCount).to.equal(4);
+      [newDate, reason] = handleChange.lastCall.args;
+
+      expect(adapterToUse.getMinutes(newDate)).to.equal(21);
+      expect(reason).to.equal('finish');
+    });
+  });
+
   it('should display options, but not update value when readOnly prop is passed', function test() {
     // Only run in supported browsers
     if (typeof Touch === 'undefined') {