From 3e89829a70570a5af9c25e13746c354d13c5b44b Mon Sep 17 00:00:00 2001 From: Ehmad Saeed Date: Tue, 19 Nov 2024 01:15:54 +0500 Subject: [PATCH 1/4] chore: clear search results when focused outside the Search widget --- .changeset/big-owls-whisper.md | 5 +++++ packages/runtime/src/widgets/Search.tsx | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/big-owls-whisper.md diff --git a/.changeset/big-owls-whisper.md b/.changeset/big-owls-whisper.md new file mode 100644 index 000000000..5b5d9902a --- /dev/null +++ b/.changeset/big-owls-whisper.md @@ -0,0 +1,5 @@ +--- +"@ensembleui/react-runtime": patch +--- + +Clear results for Search widget when focused outside the widget diff --git a/packages/runtime/src/widgets/Search.tsx b/packages/runtime/src/widgets/Search.tsx index 8fd341d0b..cef472d3f 100644 --- a/packages/runtime/src/widgets/Search.tsx +++ b/packages/runtime/src/widgets/Search.tsx @@ -227,6 +227,7 @@ export const Search: React.FC = ({ renderLabel(label, labelValue) } notFoundContent={notFoundContentRenderer} + onBlur={handleClear} onChange={handleChange} onClear={handleClear} onSearch={(search): void => setSearchValue(search)} From b5d73c6ca3954bc168b55989d8b8b0de28a6bce8 Mon Sep 17 00:00:00 2001 From: Ehmad Saeed Date: Wed, 20 Nov 2024 16:21:55 +0500 Subject: [PATCH 2/4] fix: sync the search results with the search input --- packages/runtime/src/widgets/Search.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/runtime/src/widgets/Search.tsx b/packages/runtime/src/widgets/Search.tsx index cef472d3f..4dd4aef75 100644 --- a/packages/runtime/src/widgets/Search.tsx +++ b/packages/runtime/src/widgets/Search.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState, useMemo } from "react"; +import React, { useCallback, useState, useMemo, useEffect } from "react"; import { useDebounce } from "react-use"; import { useTemplateData, @@ -74,6 +74,12 @@ export const Search: React.FC = ({ const onSelectAction = useEnsembleAction(onSelect); const onClearAction = useEnsembleAction(onClear); + useEffect(() => { + if (!searchValue) { + setHasCleared(true); + } + }, [searchValue]); + const extractValue = useCallback( (option: unknown): string | number => { return get( @@ -87,7 +93,7 @@ export const Search: React.FC = ({ ); const renderOptions = useMemo(() => { - if (hasCleared && isNil(searchValue)) return []; + if (hasCleared && (isNil(searchValue) || !searchValue)) return []; let dropdownOptions: JSX.Element[] = []; @@ -123,7 +129,7 @@ export const Search: React.FC = ({ useDebounce( () => { - if (onSearchAction?.callback && !isNull(searchValue)) { + if (onSearchAction?.callback && !isNull(searchValue) && searchValue) { setHasCleared(false); onSearchAction.callback({ search: searchValue }); } @@ -227,7 +233,6 @@ export const Search: React.FC = ({ renderLabel(label, labelValue) } notFoundContent={notFoundContentRenderer} - onBlur={handleClear} onChange={handleChange} onClear={handleClear} onSearch={(search): void => setSearchValue(search)} From 52fc89a17deb06c11f41542a4a8a1d75a5942b64 Mon Sep 17 00:00:00 2001 From: Ehmad Saeed Date: Wed, 20 Nov 2024 23:10:17 +0500 Subject: [PATCH 3/4] fix: empty the search value on select and clear the results for empty value --- packages/runtime/src/widgets/Search.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/runtime/src/widgets/Search.tsx b/packages/runtime/src/widgets/Search.tsx index 4dd4aef75..bf709e594 100644 --- a/packages/runtime/src/widgets/Search.tsx +++ b/packages/runtime/src/widgets/Search.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState, useMemo, useEffect } from "react"; +import React, { useCallback, useState, useMemo } from "react"; import { useDebounce } from "react-use"; import { useTemplateData, @@ -12,7 +12,7 @@ import type { Expression, } from "@ensembleui/react-framework"; import { Select as SelectComponent } from "antd"; -import { get, isEmpty, isNil, isNull, isObject, isString } from "lodash-es"; +import { get, isEmpty, isNil, isObject, isString } from "lodash-es"; import { WidgetRegistry } from "../registry"; import type { EnsembleWidgetProps, @@ -74,12 +74,6 @@ export const Search: React.FC = ({ const onSelectAction = useEnsembleAction(onSelect); const onClearAction = useEnsembleAction(onClear); - useEffect(() => { - if (!searchValue) { - setHasCleared(true); - } - }, [searchValue]); - const extractValue = useCallback( (option: unknown): string | number => { return get( @@ -93,7 +87,7 @@ export const Search: React.FC = ({ ); const renderOptions = useMemo(() => { - if (hasCleared && (isNil(searchValue) || !searchValue)) return []; + if (isEmpty(searchValue)) return []; let dropdownOptions: JSX.Element[] = []; @@ -129,7 +123,7 @@ export const Search: React.FC = ({ useDebounce( () => { - if (onSearchAction?.callback && !isNull(searchValue) && searchValue) { + if (onSearchAction?.callback && !isEmpty(searchValue)) { setHasCleared(false); onSearchAction.callback({ search: searchValue }); } @@ -149,6 +143,7 @@ export const Search: React.FC = ({ (selectedValue: unknown): void => { if (isObject(itemTemplate) && !isEmpty(namedData)) { setValue(selectedValue); + setSearchValue(null); const selectedOption = namedData.find( (option) => extractValue(option) === selectedValue, ); From 76150bb5f6bb83115363632cb0ff763b26782bee Mon Sep 17 00:00:00 2001 From: Ehmad Saeed Date: Thu, 21 Nov 2024 01:54:32 +0500 Subject: [PATCH 4/4] chore: remove hasCleared state --- packages/runtime/src/widgets/Search.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/runtime/src/widgets/Search.tsx b/packages/runtime/src/widgets/Search.tsx index bf709e594..921757830 100644 --- a/packages/runtime/src/widgets/Search.tsx +++ b/packages/runtime/src/widgets/Search.tsx @@ -53,7 +53,6 @@ export const Search: React.FC = ({ ...rest }) => { const [searchValue, setSearchValue] = useState(null); - const [hasCleared, setHasCleared] = useState(false); const [value, setValue] = useState(); const { namedData } = useTemplateData({ @@ -112,19 +111,11 @@ export const Search: React.FC = ({ } return dropdownOptions; - }, [ - itemTemplate, - namedData, - extractValue, - values?.id, - searchValue, - hasCleared, - ]); + }, [itemTemplate, namedData, extractValue, values?.id, searchValue]); useDebounce( () => { if (onSearchAction?.callback && !isEmpty(searchValue)) { - setHasCleared(false); onSearchAction.callback({ search: searchValue }); } }, @@ -158,7 +149,6 @@ export const Search: React.FC = ({ const handleClear = useCallback(() => { setSearchValue(null); - setHasCleared(true); onClearAction?.callback(); }, [onClearAction]);