Fix calendar and clock not switching on focus (#381)

Co-authored-by: Wojciech Maj <kontakt@wojtekmaj.pl>

Author: vlad2689

src/DateTimePicker.spec.tsx

@@ -668,6 +668,26 @@ describe('DateTimePicker', () => {
     );
   });
 
+  it('opens Calendar component, followed by Clock component, when focusing on inputs inside', () => {
+    const { container } = render(<DateTimePicker />);
+
+    const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement;
+
+    fireEvent.focus(dayInput);
+
+    const calendar = container.querySelector('.react-calendar');
+
+    expect(calendar).toBeInTheDocument();
+
+    const minuteInput = container.querySelector('input[name="minute"]') as HTMLInputElement;
+
+    fireEvent.focus(minuteInput);
+
+    const clock = container.querySelector('.react-clock');
+
+    expect(clock).toBeInTheDocument();
+  });
+
   it('closes Calendar when changing value by default', async () => {
     const { container } = render(<DateTimePicker isCalendarOpen />);
 

src/DateTimePicker.tsx

@@ -305,8 +305,6 @@ export default function DateTimePicker(props: DateTimePickerProps) {
     if (
       // Internet Explorer still fires onFocus on disabled elements
       disabled ||
-      isCalendarOpen ||
-      isClockOpen ||
       !openWidgetsOnFocus ||
       event.target.dataset.select === 'true'
     ) {
@@ -316,15 +314,25 @@ export default function DateTimePicker(props: DateTimePickerProps) {
     switch (event.target.name) {
       case 'day':
       case 'month':
-      case 'year':
+      case 'year': {
+        if (isCalendarOpen) {
+          return;
+        }
+
         openCalendar({ reason: 'focus' });
         break;
+      }
       case 'hour12':
       case 'hour24':
       case 'minute':
-      case 'second':
+      case 'second': {
+        if (isClockOpen) {
+          return;
+        }
+
         openClock({ reason: 'focus' });
         break;
+      }
       default:
     }
   }