added enter key functionality

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `21.1.0`.
+- Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
 
 ## [`21.1.0`](https://github.com/elastic/eui/tree/v21.1.0)
 

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}

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,7 @@ export class EuiRefreshInterval extends Component {
               className="euiRefreshInterval__startButton"
               iconType={this.props.isPaused ? 'play' : 'stop'}
               size="s"
-              onClick={this.toogleRefresh}
+              onClick={this.toggleRefresh}
               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>
     );