added enter key functionality

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
 - Updated `EuiFilterSelect` to retain the order of its filters ([#3063](https://github.com/elastic/eui/pull/3063))
 - Added `href` prop to `EuiBadge` ([#3009](https://github.com/elastic/eui/pull/3009))
 - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007))

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap

@@ -94,6 +94,7 @@ exports[`EuiQuickSelect is rendered 1`] = `
         className="euiQuickSelect__applyButton"
         disabled={false}
         onClick={[Function]}
+        onKeyDown={[Function]}
         size="s"
       >
         <EuiI18n
@@ -220,6 +221,7 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
         className="euiQuickSelect__applyButton"
         disabled={false}
         onClick={[Function]}
+        onKeyDown={[Function]}
         size="s"
       >
         <EuiI18n

src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -57,6 +57,10 @@ export class EuiQuickSelect extends Component {
     });
   };
 
+  handleKeyDown = ({ key }) => {
+    if (key === 'Enter') this.applyQuickSelect();
+  };
+
   applyQuickSelect = () => {
     const { timeTense, timeValue, timeUnits } = this.state;
 
@@ -194,6 +198,7 @@ export class EuiQuickSelect extends Component {
               {tenseLabel => (
                 <EuiSelect
                   compressed
+                  onKeyDown={this.handleKeyDown}
                   aria-label={tenseLabel}
                   aria-describedby={`${timeSelectionId} ${legendId}`}
                   value={timeTense}
@@ -208,6 +213,7 @@ export class EuiQuickSelect extends Component {
               {valueLabel => (
                 <EuiFieldNumber
                   compressed
+                  onKeyDown={this.handleKeyDown}
                   aria-describedby={`${timeSelectionId} ${legendId}`}
                   aria-label={valueLabel}
                   value={timeValue}
@@ -221,6 +227,7 @@ export class EuiQuickSelect extends Component {
               {unitLabel => (
                 <EuiSelect
                   compressed
+                  onKeyDown={this.handleKeyDown}
                   aria-label={unitLabel}
                   aria-describedby={`${timeSelectionId} ${legendId}`}
                   value={timeUnits}
@@ -233,6 +240,7 @@ export class EuiQuickSelect extends Component {
           <EuiFlexItem grow={false}>
             <EuiButton
               aria-describedby={`${timeSelectionId} ${legendId}`}
+              onKeyDown={this.handleKeyDown}
               className="euiQuickSelect__applyButton"
               size="s"
               onClick={this.applyQuickSelect}

src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js

@@ -90,6 +90,23 @@ export class EuiRefreshInterval extends Component {
     );
   };
 
+  startRefresh = () => {
+    const { value, units } = this.state;
+    const isValid = value === '' || value <= 0;
+    if (isValid) {
+      this.props.applyRefreshInterval({
+        refreshInterval: toMilliseconds(units, value),
+        isPaused: false,
+      });
+    }
+  };
+
+  handleKeyDown = ({ key }) => {
+    if (key === 'Enter') {
+      this.startRefresh();
+    }
+  };
+
   applyRefreshInterval = () => {
     if (this.state.value === '') {
       return;
@@ -106,7 +123,7 @@ export class EuiRefreshInterval extends Component {
     });
   };
 
-  toogleRefresh = () => {
+  toggleRefresh = () => {
     this.props.applyRefreshInterval({
       refreshInterval: toMilliseconds(this.state.units, this.state.value),
       isPaused: !this.props.isPaused,
@@ -139,6 +156,7 @@ export class EuiRefreshInterval extends Component {
               compressed
               value={value}
               onChange={this.onValueChange}
+              onKeyDown={this.handleKeyDown}
               aria-label="Refresh interval value"
               aria-describedby={`${refreshSelectionId} ${legendId}`}
               data-test-subj="superDatePickerRefreshIntervalInput"
@@ -152,6 +170,7 @@ export class EuiRefreshInterval extends Component {
               value={units}
               options={refreshUnitsOptions}
               onChange={this.onUnitsChange}
+              onKeyDown={this.handleKeyDown}
               data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
             />
           </EuiFlexItem>
@@ -160,7 +179,8 @@ export class EuiRefreshInterval extends Component {
               className="euiRefreshInterval__startButton"
               iconType={this.props.isPaused ? 'play' : 'stop'}
               size="s"
-              onClick={this.toogleRefresh}
+              onClick={this.toggleRefresh}
+              onKeyDown={this.handleKeyDown}
               disabled={value === '' || value <= 0}
               data-test-subj="superDatePickerToggleRefreshButton"
               aria-describedby={`${refreshSelectionId} ${legendId}`}>

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -470,7 +470,6 @@ export class EuiSuperDatePicker extends Component {
             {this.renderDatePickerRange()}
           </EuiFormControlLayout>
         </EuiFlexItem>
-
         {this.renderUpdateButton()}
       </EuiFlexGroup>
     );