diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx index 0397c34d0c2b8..bb0a8b848c89e 100644 --- a/src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx @@ -186,6 +186,44 @@ describe('QueryStringInput', () => { expect(mockCallback).toHaveBeenCalledWith({ query: 'response:200', language: 'kuery' }); }); + it('Should fire onBlur callback on input blur', () => { + const mockCallback = jest.fn(); + + const component = mount( + wrapQueryStringInputInContext({ + query: kqlQuery, + onBlur: mockCallback, + indexPatterns: [stubIndexPatternWithFields], + disableAutoFocus: true, + }) + ); + + const inputWrapper = component.find(EuiTextArea).find('textarea'); + inputWrapper.simulate('blur'); + + expect(mockCallback).toHaveBeenCalledTimes(1); + expect(mockCallback).toHaveBeenCalledWith(); + }); + + it('Should fire onChangeQueryInputFocus callback on input blur', () => { + const mockCallback = jest.fn(); + + const component = mount( + wrapQueryStringInputInContext({ + query: kqlQuery, + onChangeQueryInputFocus: mockCallback, + indexPatterns: [stubIndexPatternWithFields], + disableAutoFocus: true, + }) + ); + + const inputWrapper = component.find(EuiTextArea).find('textarea'); + inputWrapper.simulate('blur'); + + expect(mockCallback).toHaveBeenCalledTimes(1); + expect(mockCallback).toHaveBeenCalledWith(false); + }); + it('Should use PersistedLog for recent search suggestions', async () => { const component = mount( wrapQueryStringInputInContext({ diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx index 6f72aa829d8f3..86ee98b7af9d8 100644 --- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx @@ -33,7 +33,7 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { debounce, compact, isEqual } from 'lodash'; +import { debounce, compact, isEqual, isFunction } from 'lodash'; import { Toast } from 'src/core/public'; import { IDataPluginServices, IIndexPattern, Query } from '../..'; import { QuerySuggestion, QuerySuggestionTypes } from '../../autocomplete'; @@ -460,6 +460,9 @@ export class QueryStringInputUI extends Component { if (this.props.onChangeQueryInputFocus) { this.props.onChangeQueryInputFocus(false); } + if (isFunction(this.props.onBlur)) { + this.props.onBlur(); + } }; private onClickSuggestion = (suggestion: QuerySuggestion) => {