added enter key functionality (#3048)

* added enter key functionality * Update CHANGELOG.md * added it more strictly * restored fieldset , removed typos * used role and updated snap * updated functionality * removed keydown from fieldset * Update src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js Co-Authored-By: Chandler Prall <[email protected]> * removed uneccessary onKeyDown Co-authored-by: Chandler Prall <[email protected]>
elastic · Mar 17, 2020 · 5f7f229 · 5f7f229
1 parent 1c99a56
commit 5f7f229
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/CHANGELOG.md b/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)
 

diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js b/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}

diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js b/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}`}>

diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/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>
     );