[EuiSelectable+EuiComboBox] recent regresion fixes (#3784)

* remove space as a way to select options in Selectable * only rerender children in form row if state actually changed * adding changelog * Changelog tweaks Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
elastic · Jul 22, 2020 · a71aaf8 · a71aaf8
1 parent 3bbf28c
commit a71aaf8
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@
 - Replaced `react-focus-lock` with `react-focus-on` ([#3631](https://github.com/elastic/eui/pull/3631))
 - Fixed errors in `EuiSuperDatePicker` related to invalid and `null` date formatting ([#3750](https://github.com/elastic/eui/pull/3750))
 - Fixed type definitions for `findTestSubject` and `takeMountedSnapshot` ([#3763](https://github.com/elastic/eui/pull/3763))
+- Fixed `EuiComboBox` not allowing clicks on previously virtualized items when inside of `EuiFormRow` ([#3784](https://github.com/elastic/eui/pull/3784))
+- Removed `[Space]` as a way to select options in `EuiSelectable` ([#3784](https://github.com/elastic/eui/pull/3784))
 
 ## [`27.1.0`](https://github.com/elastic/eui/tree/v27.1.0)
 

diff --git a/src/components/form/form_row/form_row.tsx b/src/components/form/form_row/form_row.tsx
@@ -139,8 +139,14 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
       onChildFocus(...args);
     }
 
-    this.setState({
-      isFocused: true,
+    this.setState(({ isFocused }) => {
+      if (!isFocused) {
+        return {
+          isFocused: true,
+        };
+      } else {
+        return null;
+      }
     });
   };
 

diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx
@@ -231,7 +231,6 @@ export class EuiSelectable extends Component<
         break;
 
       case keys.ENTER:
-      case keys.SPACE:
         event.preventDefault();
         event.stopPropagation();
         if (this.state.activeOptionIndex != null && optionsList) {

diff --git a/src/components/selectable/selectable_list/selectable_list_item.tsx b/src/components/selectable/selectable_list/selectable_list_item.tsx
@@ -135,7 +135,7 @@ export class EuiSelectableListItem extends Component<
           <span>
             <EuiI18n
               token="euiSelectableListItem.includedOptionInstructions"
-              default="To exclude this option, press enter or space."
+              default="To exclude this option, press enter."
             />
           </span>
         </EuiScreenReaderOnly>
@@ -156,7 +156,7 @@ export class EuiSelectableListItem extends Component<
           <span>
             <EuiI18n
               token="euiSelectableListItem.excludedOptionInstructions"
-              default="To deselect this option, press enter or space."
+              default="To deselect this option, press enter."
             />
           </span>
         </EuiScreenReaderOnly>