Merge branch 'develop' into release/v0.15.0

SigNoz · Jan 31, 2023 · 622e176 · 622e176
2 parents 4542a51 + faaf0a6
commit 622e176
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx
@@ -175,13 +175,15 @@ export interface QueryBuilderProps {
 	onDropDownToggleHandler: (value: boolean) => VoidFunction;
 	fieldsQuery: QueryFields[][];
 	setFieldsQuery: (q: QueryFields[][]) => void;
+	syncKeyPrefix: () => void;
 }
 
 function QueryBuilder({
 	keyPrefix,
 	fieldsQuery,
 	setFieldsQuery,
 	onDropDownToggleHandler,
+	syncKeyPrefix,
 }: QueryBuilderProps): JSX.Element {
 	const handleUpdate = (query: Query, queryIndex: number): void => {
 		const updated = [...fieldsQuery];
@@ -195,6 +197,9 @@ function QueryBuilder({
 		else updated.splice(queryIndex, 2);
 
 		setFieldsQuery(updated);
+
+		// initiate re-render query panel
+		syncKeyPrefix();
 	};
 
 	const QueryUI = (

diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx
@@ -47,9 +47,12 @@ function SearchFields({
 		}
 	}, [parsedQuery]);
 
-	const updateFieldsQuery = (updated: QueryFields[][]): void => {
-		setFieldsQuery(updated);
-		keyPrefixRef.current = hashCode(JSON.stringify(updated));
+	// syncKeyPrefix initiates re-render. useful in situations like
+	// delete field (in search panel). this method allows condiitonally
+	// setting keyPrefix as doing it on every update of query initiates
+	// a re-render. this is a problem for text fields where input focus goes away.
+	const syncKeyPrefix = (): void => {
+		keyPrefixRef.current = hashCode(JSON.stringify(fieldsQuery));
 	};
 
 	const addSuggestedField = useCallback(
@@ -102,7 +105,8 @@ function SearchFields({
 				keyPrefix={keyPrefixRef.current}
 				onDropDownToggleHandler={onDropDownToggleHandler}
 				fieldsQuery={fieldsQuery}
-				setFieldsQuery={updateFieldsQuery}
+				setFieldsQuery={setFieldsQuery}
+				syncKeyPrefix={syncKeyPrefix}
 			/>
 			<SearchFieldsActionBar
 				applyUpdate={applyUpdate}