[EuiSuperDatePicker] Allow setting absolute dates without Enter key

changelogs/upcoming/7732.md

@@ -0,0 +1 @@
+- Updated `EuiSuperDatePicker`'s absolute tab UX to support setting manual timestamps via mouse click as well as enter key

src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss

@@ -1,24 +1,19 @@
-.euiSuperDatePicker__absoluteDateFormRow {
+.euiSuperDatePicker__absoluteDateForm {
   padding: 0 $euiSizeS $euiSizeS;
+}
 
-  /* A bit of a visual trickery to make the format "hint" become an "error" text.
-     NOTE: Normally reordering visually (vs DOM) isn't super great for screen reader users,
-     but as the help text is already read out via `aria-describedby`, and the error text
-     is read out immediately via `aria-live`, we can fairly safely prioritize visuals instead */
-  .euiFormRow__fieldWrapper {
-    display: flex;
-    flex-direction: column;
-  };
-
-  .euiFormControlLayout {
-    order: 0;
-  }
+.euiSuperDatePicker__absoluteDateFormSubmit {
+  flex-shrink: 0;
+}
 
-  .euiFormHelpText {
-    order: 1;
-  }
+.euiSuperDatePicker__absoluteDateFormRow {
+  flex-grow: 1;
 
-  .euiFormErrorText {
-    order: 2;
+  // CSS hack to make the help/error text extend to the submit button.
+  // We can't actually put the submit button within an EuiFormRow due to
+  // cloneElement limitations (https://github.com/elastic/eui/issues/2493#issuecomment-561278494)
+  // TODO: Remove this and clean up DOM rendering once we can
+  .euiFormRow__text {
+    margin-inline-end: -1 * ($euiSizeXL + $euiSizeS); // XL - size of the button, S - size of the flex gap
   }
 }

src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx

@@ -36,35 +36,40 @@ describe('EuiAbsoluteTab', () => {
   };
 
   describe('user input', () => {
-    it('displays the enter key help text when the input has been edited and the date has not yet been parsed', () => {
-      const { getByTestSubject, queryByText } = render(
+    const formatHelpText = /Allowed formats: /;
+
+    it('displays helptext and a submit button when the input has been edited and the date has not yet been parsed', () => {
+      const { getByTestSubject, queryByTestSubject, queryByText } = render(
         <EuiAbsoluteTab {...props} />
       );
-      const helpText = 'Press the Enter key to parse as a date.';
-      expect(queryByText(helpText)).not.toBeInTheDocument();
+      expect(queryByText(formatHelpText)).not.toBeInTheDocument();
+      expect(
+        queryByTestSubject('parseAbsoluteDateFormat')
+      ).not.toBeInTheDocument();
 
       const input = getByTestSubject('superDatePickerAbsoluteDateInput');
       fireEvent.change(input, { target: { value: 'test' } });
 
-      expect(queryByText(helpText)).toBeInTheDocument();
+      expect(queryByText(formatHelpText)).toBeInTheDocument();
+      expect(queryByTestSubject('parseAbsoluteDateFormat')).toBeInTheDocument();
     });
 
     it('displays the formats as a hint before parse, but as an error if invalid', () => {
       const { getByTestSubject, queryByText } = render(
         <EuiAbsoluteTab {...props} />
       );
-      const formatHelpText = /Allowed formats: /;
       expect(queryByText(formatHelpText)).not.toBeInTheDocument();
 
-      const input = getByTestSubject('superDatePickerAbsoluteDateInput');
-      fireEvent.change(input, { target: { value: 'test' } });
+      fireEvent.change(getByTestSubject('superDatePickerAbsoluteDateInput'), {
+        target: { value: 'test' },
+      });
       expect(queryByText(formatHelpText)).toHaveClass('euiFormHelpText');
 
-      fireEvent.keyDown(input, { key: 'Enter' });
+      fireEvent.click(getByTestSubject('parseAbsoluteDateFormat'));
       expect(queryByText(formatHelpText)).toHaveClass('euiFormErrorText');
     });
 
-    it('immediately parses pasted text without needing an extra enter keypress', () => {
+    it('immediately parses pasted text without needing an extra click or keypress', () => {
       const { getByTestSubject, queryByText } = render(
         <EuiAbsoluteTab {...props} />
       );
@@ -84,15 +89,14 @@ describe('EuiAbsoluteTab', () => {
       });
       expect(input).toBeInvalid();
 
-      expect(queryByText(/Allowed formats: /)).toBeInTheDocument();
-      expect(queryByText(/Press the Enter key /)).not.toBeInTheDocument();
+      expect(queryByText(formatHelpText)).toBeInTheDocument();
     });
   });
 
   describe('date parsing', () => {
     const changeInput = (input: HTMLElement, value: string) => {
-      fireEvent.change(input, { target: { value } });
-      fireEvent.keyDown(input, { key: 'Enter' });
+      fireEvent.change(input, { target: { value: `${value}` } });
+      fireEvent.submit(input.closest('form')!);
     };
 
     it('parses the passed `dateFormat` prop', () => {

src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx

@@ -6,14 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React, { Component, ChangeEvent } from 'react';
+import React, { Component, ChangeEvent, FormEvent } from 'react';
 
 import moment, { Moment, LocaleSpecifier } from 'moment'; // eslint-disable-line import/named
 
 import dateMath from '@elastic/datemath';
 
-import { keys } from '../../../../services';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
+import { EuiFlexGroup } from '../../../flex';
+import { EuiButtonIcon } from '../../../button';
 import { EuiCode } from '../../../code';
 import { EuiI18n } from '../../../i18n';
 
@@ -167,45 +168,63 @@ export class EuiAbsoluteTab extends Component<
         />
         <EuiI18n
           tokens={[
-            'euiAbsoluteTab.dateFormatHint',
+            'euiAbsoluteTab.dateFormatButtonLabel',
             'euiAbsoluteTab.dateFormatError',
           ]}
           defaults={[
-            'Press the Enter key to parse as a date.',
+            'Parse date',
             'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.',
           ]}
           values={{ dateFormat: <EuiCode>{dateFormat}</EuiCode> }}
         >
-          {([dateFormatHint, dateFormatError]: string[]) => (
-            <EuiFormRow
-              className="euiSuperDatePicker__absoluteDateFormRow"
-              isInvalid={isTextInvalid}
-              error={isTextInvalid ? dateFormatError : undefined}
-              helpText={
-                hasUnparsedText
-                  ? isTextInvalid
-                    ? dateFormatHint
-                    : [dateFormatHint, dateFormatError]
-                  : undefined
-              }
+          {([dateFormatButtonLabel, dateFormatError]: string[]) => (
+            <EuiFlexGroup
+              component="form"
+              onSubmit={(e: FormEvent) => {
+                e.preventDefault(); // Prevents a page refresh/reload
+                this.parseUserDateInput(textInputValue);
+              }}
+              className="euiSuperDatePicker__absoluteDateForm"
+              gutterSize="s"
+              responsive={false}
             >
-              <EuiFieldText
-                compressed
+              <EuiFormRow
+                className="euiSuperDatePicker__absoluteDateFormRow"
                 isInvalid={isTextInvalid}
-                value={textInputValue}
-                onChange={this.handleTextChange}
-                onPaste={(event) => {
-                  this.parseUserDateInput(event.clipboardData.getData('text'));
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === keys.ENTER) {
-                    this.parseUserDateInput(textInputValue);
-                  }
-                }}
-                data-test-subj="superDatePickerAbsoluteDateInput"
-                prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
-              />
-            </EuiFormRow>
+                error={isTextInvalid ? dateFormatError : undefined}
+                helpText={
+                  hasUnparsedText && !isTextInvalid
+                    ? dateFormatError
+                    : undefined
+                }
+              >
+                <EuiFieldText
+                  compressed
+                  isInvalid={isTextInvalid}
+                  value={textInputValue}
+                  onChange={this.handleTextChange}
+                  onPaste={(event) => {
+                    this.parseUserDateInput(
+                      event.clipboardData.getData('text')
+                    );
+                  }}
+                  data-test-subj="superDatePickerAbsoluteDateInput"
+                  prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
+                />
+              </EuiFormRow>
+              {hasUnparsedText && (
+                <EuiButtonIcon
+                  type="submit"
+                  className="euiSuperDatePicker__absoluteDateFormSubmit"
+                  size="s"
+                  display="base"
+                  iconType="check"
+                  aria-label={dateFormatButtonLabel}
+                  title={dateFormatButtonLabel}
+                  data-test-subj="parseAbsoluteDateFormat"
+                />
+              )}
+            </EuiFlexGroup>
           )}
         </EuiI18n>
       </>