[Discover] Close filter popup on click outside (#49934)
This commit is contained in:
parent
4860c055e1
commit
8f6c41f268
|
@ -16,13 +16,13 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { EventHandler, MouseEvent as ReactMouseEvent } from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { mountWithIntl } from 'test_utils/enzyme_helpers';
|
||||
// @ts-ignore
|
||||
import { findTestSubject } from '@elastic/eui/lib/test';
|
||||
import { DiscoverFieldSearch, Props } from './discover_field_search';
|
||||
import { EuiButtonGroupProps } from '@elastic/eui';
|
||||
import { EuiButtonGroupProps, EuiPopover } from '@elastic/eui';
|
||||
import { ReactWrapper } from 'enzyme';
|
||||
|
||||
describe('DiscoverFieldSearch', () => {
|
||||
|
@ -136,4 +136,44 @@ describe('DiscoverFieldSearch', () => {
|
|||
typeSelector.simulate('change', { target: { value: 'any' } });
|
||||
expect(onChange).toBeCalledWith('type', 'any');
|
||||
});
|
||||
|
||||
test('click on filter button should open and close popover', () => {
|
||||
const component = mountComponent();
|
||||
const btn = findTestSubject(component, 'toggleFieldFilterButton');
|
||||
btn.simulate('click');
|
||||
let popover = component.find(EuiPopover);
|
||||
expect(popover.prop('isOpen')).toBe(true);
|
||||
btn.simulate('click');
|
||||
popover = component.find(EuiPopover);
|
||||
expect(popover.prop('isOpen')).toBe(false);
|
||||
});
|
||||
|
||||
test('click outside popover should close popover', () => {
|
||||
const triggerDocumentMouseDown: EventHandler<any> = (e: ReactMouseEvent<any>) => {
|
||||
const event = new Event('mousedown');
|
||||
// @ts-ignore
|
||||
event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
|
||||
document.dispatchEvent(event);
|
||||
};
|
||||
const triggerDocumentMouseUp: EventHandler<any> = (e: ReactMouseEvent<any>) => {
|
||||
const event = new Event('mouseup');
|
||||
// @ts-ignore
|
||||
event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
|
||||
document.dispatchEvent(event);
|
||||
};
|
||||
const component = mountWithIntl(
|
||||
<div onMouseDown={triggerDocumentMouseDown} onMouseUp={triggerDocumentMouseUp} id="wrapperId">
|
||||
<DiscoverFieldSearch {...defaultProps} />
|
||||
</div>
|
||||
);
|
||||
const btn = findTestSubject(component, 'toggleFieldFilterButton');
|
||||
btn.simulate('click');
|
||||
let popover = component.find(EuiPopover);
|
||||
expect(popover.length).toBe(1);
|
||||
expect(popover.prop('isOpen')).toBe(true);
|
||||
component.find('#wrapperId').simulate('mousedown');
|
||||
component.find('#wrapperId').simulate('mouseup');
|
||||
popover = component.find(EuiPopover);
|
||||
expect(popover.prop('isOpen')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -32,6 +32,7 @@ import {
|
|||
EuiForm,
|
||||
EuiFormRow,
|
||||
EuiButtonGroup,
|
||||
EuiOutsideClickDetector,
|
||||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
|
@ -244,6 +245,7 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
|
|||
</EuiForm>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<EuiFlexGroup responsive={false} gutterSize={'s'}>
|
||||
|
@ -260,33 +262,37 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
|
|||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<div className="dscFieldSearch__filterWrapper">
|
||||
<EuiPopover
|
||||
id="dataPanelTypeFilter"
|
||||
panelClassName="euiFilterGroup__popoverPanel"
|
||||
panelPaddingSize="none"
|
||||
anchorPosition="downLeft"
|
||||
display="block"
|
||||
isOpen={isPopoverOpen}
|
||||
closePopover={() => {}}
|
||||
button={buttonContent}
|
||||
>
|
||||
<EuiPopoverTitle>
|
||||
{i18n.translate('kbn.discover.fieldChooser.filter.filterByTypeLabel', {
|
||||
defaultMessage: 'Filter by type',
|
||||
})}
|
||||
</EuiPopoverTitle>
|
||||
{selectionPanel}
|
||||
<EuiPopoverFooter>
|
||||
<EuiSwitch
|
||||
label={i18n.translate('kbn.discover.fieldChooser.filter.hideMissingFieldsLabel', {
|
||||
defaultMessage: 'Hide missing fields',
|
||||
<EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
|
||||
<EuiPopover
|
||||
id="dataPanelTypeFilter"
|
||||
panelClassName="euiFilterGroup__popoverPanel"
|
||||
panelPaddingSize="none"
|
||||
anchorPosition="downLeft"
|
||||
display="block"
|
||||
isOpen={isPopoverOpen}
|
||||
closePopover={() => {
|
||||
setPopoverOpen(false);
|
||||
}}
|
||||
button={buttonContent}
|
||||
>
|
||||
<EuiPopoverTitle>
|
||||
{i18n.translate('kbn.discover.fieldChooser.filter.filterByTypeLabel', {
|
||||
defaultMessage: 'Filter by type',
|
||||
})}
|
||||
checked={values.missing}
|
||||
onChange={handleMissingChange}
|
||||
data-test-subj="missingSwitch"
|
||||
/>
|
||||
</EuiPopoverFooter>
|
||||
</EuiPopover>
|
||||
</EuiPopoverTitle>
|
||||
{selectionPanel}
|
||||
<EuiPopoverFooter>
|
||||
<EuiSwitch
|
||||
label={i18n.translate('kbn.discover.fieldChooser.filter.hideMissingFieldsLabel', {
|
||||
defaultMessage: 'Hide missing fields',
|
||||
})}
|
||||
checked={values.missing}
|
||||
onChange={handleMissingChange}
|
||||
data-test-subj="missingSwitch"
|
||||
/>
|
||||
</EuiPopoverFooter>
|
||||
</EuiPopover>
|
||||
</EuiOutsideClickDetector>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue