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..921757830 100644 --- a/packages/runtime/src/widgets/Search.tsx +++ b/packages/runtime/src/widgets/Search.tsx @@ -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, @@ -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({ @@ -87,7 +86,7 @@ export const Search: React.FC = ({ ); const renderOptions = useMemo(() => { - if (hasCleared && isNil(searchValue)) return []; + if (isEmpty(searchValue)) return []; let dropdownOptions: JSX.Element[] = []; @@ -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 && !isNull(searchValue)) { - setHasCleared(false); + if (onSearchAction?.callback && !isEmpty(searchValue)) { onSearchAction.callback({ search: searchValue }); } }, @@ -143,6 +134,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, ); @@ -157,7 +149,6 @@ export const Search: React.FC = ({ const handleClear = useCallback(() => { setSearchValue(null); - setHasCleared(true); onClearAction?.callback(); }, [onClearAction]);