diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx index 6c71aca80113..9367ded902c1 100644 --- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx +++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx @@ -3,6 +3,7 @@ import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSc import { isObject } from '@sniptt/guards'; import { useState } from 'react'; import { IconChevronLeft, MenuItemSelect } from 'twenty-ui'; +import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; type SearchVariablesDropdownStepSubItemProps = { step: StepOutputSchema; @@ -16,6 +17,7 @@ const SearchVariablesDropdownStepSubItem = ({ onBack, }: SearchVariablesDropdownStepSubItemProps) => { const [currentPath, setCurrentPath] = useState([]); + const [searchInputValue, setSearchInputValue] = useState(''); const getSelectedObject = () => { let selected = step.outputSchema; @@ -30,6 +32,7 @@ const SearchVariablesDropdownStepSubItem = ({ if (isObject(selectedObject[key])) { setCurrentPath([...currentPath, key]); + setSearchInputValue(''); } else { onSelect(`{{${step.id}.${[...currentPath, key].join('.')}}}`); } @@ -45,12 +48,25 @@ const SearchVariablesDropdownStepSubItem = ({ const headerLabel = currentPath.length === 0 ? step.name : currentPath.at(-1); + const options = Object.entries(getSelectedObject()); + + const filteredOptions = searchInputValue + ? options.filter(([key]) => + key.toLowerCase().includes(searchInputValue.toLowerCase()), + ) + : options; + return ( <> {headerLabel} - {Object.entries(getSelectedObject()).map(([key, value]) => ( + setSearchInputValue(event.target.value)} + /> + {filteredOptions.map(([key, value]) => (