diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
index 46d535737a..85c7ea2c64 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -59,6 +59,7 @@ function QueryBuilderSearch({
updateTag,
handleClearTag,
handleKeyDown,
+ handleOnBlur,
handleSearch,
handleSelect,
tags,
@@ -260,6 +261,7 @@ function QueryBuilderSearch({
notFoundContent={isFetching ? : null}
suffixIcon={suffixIcon}
showAction={['focus']}
+ onBlur={handleOnBlur}
>
{options.map((option) => (
diff --git a/frontend/src/hooks/queryBuilder/useAutoComplete.ts b/frontend/src/hooks/queryBuilder/useAutoComplete.ts
index dad262757a..6ac51eb45d 100644
--- a/frontend/src/hooks/queryBuilder/useAutoComplete.ts
+++ b/frontend/src/hooks/queryBuilder/useAutoComplete.ts
@@ -1,3 +1,4 @@
+import { OPERATORS } from 'constants/queryBuilder';
import {
getRemovePrefixFromKey,
getTagToken,
@@ -10,7 +11,7 @@ import { KeyboardEvent, useCallback, useState } from 'react';
import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
import { useFetchKeysAndValues } from './useFetchKeysAndValues';
-import { useOptions } from './useOptions';
+import { useOptions, WHERE_CLAUSE_CUSTOM_SUFFIX } from './useOptions';
import { useSetCurrentKeyAndOperator } from './useSetCurrentKeyAndOperator';
import { useTag } from './useTag';
import { useTagValidation } from './useTagValidation';
@@ -98,6 +99,23 @@ export const useAutoComplete = (
[handleAddTag, handleClearTag, isMulti, isValidTag, searchValue, tags],
);
+ const handleOnBlur = (event: React.FocusEvent): void => {
+ event.preventDefault();
+ if (searchValue) {
+ if (
+ key &&
+ !operator &&
+ whereClauseConfig?.customKey === 'body' &&
+ whereClauseConfig.customOp === OPERATORS.CONTAINS
+ ) {
+ const value = `${searchValue}${WHERE_CLAUSE_CUSTOM_SUFFIX}`;
+ handleAddTag(value);
+ return;
+ }
+ handleAddTag(searchValue);
+ }
+ };
+
const options = useOptions(
key,
keys,
@@ -117,6 +135,7 @@ export const useAutoComplete = (
handleClearTag,
handleSelect,
handleKeyDown,
+ handleOnBlur,
options,
tags,
searchValue,
@@ -133,6 +152,7 @@ interface IAutoComplete {
handleClearTag: (value: string) => void;
handleSelect: (value: string) => void;
handleKeyDown: (event: React.KeyboardEvent) => void;
+ handleOnBlur: (event: React.FocusEvent) => void;
options: Option[];
tags: string[];
searchValue: string;