diff --git a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx index c29d232e621..6d8a1fb7c88 100644 --- a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx +++ b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx @@ -125,17 +125,20 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props fetchTags(); }, [languageProvider]); - const onTypeahead = async (typeahead: TypeaheadInput): Promise => { - return await languageProvider.provideCompletionItems(typeahead); - }; + const onTypeahead = useCallback( + async (typeahead: TypeaheadInput): Promise => { + return await languageProvider.provideCompletionItems(typeahead); + }, + [languageProvider] + ); - const cleanText = (text: string) => { + const cleanText = useCallback((text: string) => { const splittedText = text.split(/\s+(?=([^"]*"[^"]*")*[^"]*$)/g); if (splittedText.length > 1) { return splittedText[splittedText.length - 1]; } return text; - }; + }, []); const onKeyDown = (keyEvent: React.KeyboardEvent) => { if (keyEvent.key === 'Enter' && (keyEvent.shiftKey || keyEvent.ctrlKey)) { @@ -157,6 +160,13 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props } }; + const handleOnChange = useCallback((value) => { + onChange({ + ...query, + search: value, + }); + }, []); // eslint-disable-line + const templateSrv: TemplateSrv = getTemplateSrv(); return ( @@ -211,14 +221,9 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props query={query.search} onTypeahead={onTypeahead} onBlur={onBlur} - onChange={(value) => { - onChange({ - ...query, - search: value, - }); - }} - placeholder="http.status_code=200 error=true" + onChange={handleOnChange} cleanText={cleanText} + placeholder="http.status_code=200 error=true" onRunQuery={onRunQuery} syntaxLoaded={hasSyntaxLoaded} portalOrigin="tempo"