Fix duplicate popover ids with multiple EuiInMemoryTable filters on the page

cee-chen · cee-chen · commit 08ca1425a0f9 · 2021-10-04T16:14:01.000-07:00
- there's no real need for this popover to have a custom ID instead of a randomized one - remove it

- This is possibly only an issue with our docs and the fact that we use the same dataset repeatedly across examples, but solves the error of duplicated IDs and shouldn't negatively affect production users
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.tsx.snap b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.tsx.snap
@@ -17,7 +17,6 @@ exports[`FieldValueSelectionFilter active - field is global 1`] = `
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
-  id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
   panelClassName="euiFilterGroup__popoverPanel"
@@ -60,7 +59,6 @@ exports[`FieldValueSelectionFilter active - fields in options 1`] = `
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
-  id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
   panelClassName="euiFilterGroup__popoverPanel"
@@ -103,7 +101,6 @@ exports[`FieldValueSelectionFilter inactive - field is global 1`] = `
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
-  id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
   panelClassName="euiFilterGroup__popoverPanel"
@@ -159,7 +156,6 @@ exports[`FieldValueSelectionFilter inactive - fields in options 1`] = `
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
-  id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
   panelClassName="euiFilterGroup__popoverPanel"
@@ -215,7 +211,6 @@ exports[`FieldValueSelectionFilter render - all configurations 1`] = `
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
-  id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
   panelClassName="euiFilterGroup__popoverPanel"
@@ -258,7 +253,6 @@ exports[`FieldValueSelectionFilter render - fields in options 1`] = `
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
-  id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
   panelClassName="euiFilterGroup__popoverPanel"
@@ -314,7 +308,6 @@ exports[`FieldValueSelectionFilter render - multi-select OR 1`] = `
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
-  id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
   panelClassName="euiFilterGroup__popoverPanel"
@@ -357,7 +350,6 @@ exports[`FieldValueSelectionFilter render - options as a function 1`] = `
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
-  id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
   panelClassName="euiFilterGroup__popoverPanel"
@@ -400,7 +392,6 @@ exports[`FieldValueSelectionFilter render - options as an array 1`] = `
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
-  id="field_value_selection_0"
   isOpen={false}
   ownFocus={true}
   panelClassName="euiFilterGroup__popoverPanel"
diff --git a/src/components/search_bar/filters/field_value_selection_filter.tsx b/src/components/search_bar/filters/field_value_selection_filter.tsx
@@ -334,7 +334,7 @@ export class FieldValueSelectionFilter extends Component<
   }
 
   render() {
-    const { index, query, config } = this.props;
+    const { query, config } = this.props;
     const multiSelect = this.resolveMultiSelect();
 
     const activeTop = this.isActiveField(config.field);
@@ -368,7 +368,6 @@ export class FieldValueSelectionFilter extends Component<
 
     return (
       <EuiPopover
-        id={`${config.type}_${index}`}
         button={button}
         isOpen={this.state.popoverOpen}
         closePopover={this.closePopover.bind(this)}
