Allow setting absolute dates without Enter key on EuiSuperDatePicker

elastic · May 3, 2024 · e0ff1d5 · e0ff1d5
1 parent 67a0675
commit e0ff1d5
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx
@@ -23,7 +23,15 @@ describe('EuiAbsoluteTab', () => {
   const rafSpy = jest
     .spyOn(window, 'requestAnimationFrame')
     .mockImplementation((cb: Function) => cb());
-  afterAll(() => rafSpy.mockRestore());
+  // mock setTimeout to fire immediately
+  const stoSpy = jest
+    .spyOn(window, 'setTimeout')
+    .mockImplementation((cb: Function) => cb());
+  // restore mocked functions
+  afterAll(() => {
+    rafSpy.mockRestore();
+    stoSpy.mockRestore();
+  });
 
   const props = {
     dateFormat: 'MMM D, YYYY @ HH:mm:ss.SSS',

diff --git a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
@@ -99,6 +99,30 @@ export class EuiAbsoluteTab extends Component<
     });
   };
 
+  setStateTimeoutId: ReturnType<typeof setTimeout> | undefined;
+  override setState<K extends keyof EuiAbsoluteTabState>(
+    state: Pick<EuiAbsoluteTabState, K>
+  ): void {
+    clearTimeout(this.setStateTimeoutId);
+
+    if (
+      // Only TypeScript 4.9+ understands this in-narrowing
+      'isTextInvalid' in state &&
+      // @ts-ignore TS2339: TODO remove in TypeScript 4.9+
+      state.isTextInvalid
+    ) {
+      // Defer setting true to isTextInvalid
+      this.setStateTimeoutId = setTimeout(
+        () => super.setState({ isTextInvalid: true }),
+        100 // a very short period to avoid text blinking on switching tabs
+      );
+      // @ts-ignore TS2339: TODO remove in TypeScript 4.9+
+      delete state.isTextInvalid;
+    }
+
+    return super.setState(state);
+  }
+
   parseUserDateInput = (textInputValue: string) => {
     this.isParsing = true;
     // Wait a tick for state to finish updating (whatever gets returned),
@@ -202,6 +226,7 @@ export class EuiAbsoluteTab extends Component<
                     this.parseUserDateInput(textInputValue);
                   }
                 }}
+                onBlur={() => this.parseUserDateInput(textInputValue)}
                 data-test-subj="superDatePickerAbsoluteDateInput"
                 prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
               />