diff --git a/src/components/search_bar/filters/field_value_selection_filter.spec.tsx b/src/components/search_bar/filters/field_value_selection_filter.spec.tsx
index 23181d23e45..4e196c2c40b 100644
--- a/src/components/search_bar/filters/field_value_selection_filter.spec.tsx
+++ b/src/components/search_bar/filters/field_value_selection_filter.spec.tsx
@@ -6,7 +6,9 @@
* Side Public License, v 1.
*/
-import React from 'react';
+///
+
+import React, { useState } from 'react';
import { requiredProps } from '../../../test';
import {
FieldValueSelectionFilter,
@@ -135,31 +137,90 @@ describe('FieldValueSelectionFilter', () => {
);
});
- it('uses multi-select OR', () => {
- const props: FieldValueSelectionFilterProps = {
- ...requiredProps,
- index: 0,
- onChange: () => {},
- query: Query.parse(''),
- config: {
- type: 'field_value_selection',
- field: 'tag',
- name: 'Tag',
- multiSelect: 'or',
- available: () => false,
- loadingMessage: 'loading...',
- noOptionsMessage: 'oops...',
- searchThreshold: 5,
- options: () => Promise.resolve([]),
- },
+ describe('multi-select testing', () => {
+ const FieldValueSelectionFilterWithState = ({
+ multiSelect,
+ }: {
+ multiSelect: 'or' | boolean;
+ }) => {
+ const [query, setQuery] = useState(Query.parse(''));
+ const onChange = (newQuery) => setQuery(newQuery);
+
+ const props: FieldValueSelectionFilterProps = {
+ ...requiredProps,
+ index: 0,
+ onChange,
+ query,
+ config: {
+ type: 'field_value_selection',
+ field: 'tag',
+ name: 'Tag',
+ multiSelect,
+ options: staticOptions,
+ },
+ };
+
+ return ;
};
- cy.mount();
- cy.get('button').click();
- cy.get('[data-test-subj="euiSelectableMessage"]').should(
- 'have.text',
- 'oops...'
- );
+ it('uses multi-select OR', () => {
+ cy.mount();
+ cy.get('button').click();
+
+ cy.get('li[role="option"][title="feature"]')
+ .should('have.attr', 'aria-checked', 'false')
+ .click();
+ cy.get('.euiNotificationBadge').should('have.text', '1');
+ cy.get('li[role="option"][title="feature"]').should(
+ 'have.attr',
+ 'aria-checked',
+ 'true'
+ );
+ // Popover should still be open when multiselect is true/or
+ cy.get('li[role="option"][title="Bug"]')
+ .should('have.attr', 'aria-checked', 'false')
+ .click();
+ cy.get('.euiNotificationBadge').should('have.text', '2');
+ cy.get('li[role="option"][title="Bug"]').should(
+ 'have.attr',
+ 'aria-checked',
+ 'true'
+ );
+ });
+
+ it('uses multi-select false', () => {
+ cy.mount();
+ cy.get('button').click();
+
+ cy.get('li[role="option"][title="feature"]')
+ .should('have.attr', 'aria-checked', 'false')
+ .click();
+ cy.get('.euiNotificationBadge').should('have.text', '1');
+ cy.get('li[role="option"][title="feature"]').should(
+ 'have.attr',
+ 'aria-checked',
+ 'true'
+ );
+
+ // Multiselect false should close the popover, so we need to re-open it
+ cy.get('button').click();
+ cy.get('li[role="option"][title="Bug"]')
+ .should('have.attr', 'aria-checked', 'false')
+ .click();
+ // Filter count should have remained at 1
+ cy.get('.euiNotificationBadge').should('have.text', '1');
+ cy.get('li[role="option"][title="Bug"]').should(
+ 'have.attr',
+ 'aria-checked',
+ 'true'
+ );
+ // 'featured' should now be unchecked
+ cy.get('li[role="option"][title="feature"]').should(
+ 'have.attr',
+ 'aria-checked',
+ 'false'
+ );
+ });
});
it('has inactive filters, field is global', () => {
diff --git a/src/components/search_bar/filters/field_value_selection_filter.tsx b/src/components/search_bar/filters/field_value_selection_filter.tsx
index d908c24884f..16b17e82831 100644
--- a/src/components/search_bar/filters/field_value_selection_filter.tsx
+++ b/src/components/search_bar/filters/field_value_selection_filter.tsx
@@ -259,23 +259,23 @@ export class FieldValueSelectionFilter extends Component<
if (!multiSelect && autoClose) {
this.closePopover();
const query = checked
- ? this.props.query.removeSimpleFieldClauses(field)
- : this.props.query
+ ? this.props.query
.removeSimpleFieldClauses(field)
- .addSimpleFieldValue(field, value, true, operator);
+ .addSimpleFieldValue(field, value, true, operator)
+ : this.props.query.removeSimpleFieldClauses(field);
this.props.onChange(query);
} else {
if (multiSelect === 'or') {
const query = checked
- ? this.props.query.removeOrFieldValue(field, value)
- : this.props.query.addOrFieldValue(field, value, true, operator);
+ ? this.props.query.addOrFieldValue(field, value, true, operator)
+ : this.props.query.removeOrFieldValue(field, value);
this.props.onChange(query);
} else {
const query = checked
- ? this.props.query.removeSimpleFieldValue(field, value)
- : this.props.query.addSimpleFieldValue(field, value, true, operator);
+ ? this.props.query.addSimpleFieldValue(field, value, true, operator)
+ : this.props.query.removeSimpleFieldValue(field, value);
this.props.onChange(query);
}
@@ -404,15 +404,12 @@ export class FieldValueSelectionFilter extends Component<
listProps={{
isVirtualized: isOverSearchThreshold || false,
}}
- onChange={(options) => {
- const diff = items.find(
- (item, index) => item.checked !== options[index].checked
- );
- if (diff) {
+ onChange={(options, event, changedOption) => {
+ if (changedOption.data) {
this.onOptionClick(
- diff.data.optionField,
- diff.data.value,
- diff.checked
+ changedOption.data.optionField,
+ changedOption.data.value,
+ changedOption.checked
);
}
}}
diff --git a/upcoming_changelogs/6577.md b/upcoming_changelogs/6577.md
new file mode 100644
index 00000000000..977b7164592
--- /dev/null
+++ b/upcoming_changelogs/6577.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed a bug with `EuiSearchBar` where filters with `multiSelect: false` were not able to select a new option when an option was already selected