refactor: onblur convert to tag (#4662)

* refactor: onblur convert to tag

* refactor: on blur log body contains

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
This commit is contained in:
Rajat Dabade 2024-03-12 14:34:10 +05:30 committed by GitHub
parent dd2afe19f6
commit d9b379ae51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 1 deletions

View File

@ -59,6 +59,7 @@ function QueryBuilderSearch({
updateTag,
handleClearTag,
handleKeyDown,
handleOnBlur,
handleSearch,
handleSelect,
tags,
@ -260,6 +261,7 @@ function QueryBuilderSearch({
notFoundContent={isFetching ? <Spin size="small" /> : null}
suffixIcon={suffixIcon}
showAction={['focus']}
onBlur={handleOnBlur}
>
{options.map((option) => (
<Select.Option key={option.label} value={option.value}>

View File

@ -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<HTMLInputElement>): 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<HTMLInputElement>) => void;
options: Option[];
tags: string[];
searchValue: string;