Dynamic Filtering while typing about twenty HOT 1 CLOSED

To implement dynamic filtering while typing:

1. Modify ObjectFilterDropdownTextSearchInput.tsx:

   • Update the onChange handler to filter options dynamically.

   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setObjectFilterDropdownSearchInput(value);
     selectFilter({ ...filter, value });
     // Add dynamic filtering logic here
     updateFilteredOptions(value);
   };

2. Update ObjectFilterDropdownOptionSelect.tsx:

   • Add a state to store filtered options and update it based on the search input.

   const [filteredOptions, setFilteredOptions] = useState<SelectOptionForFilter[]>(options);
   
   useEffect(() => {
     setFilteredOptions(options.filter(option => option.label.toLowerCase().includes(searchInput.toLowerCase())));
   }, [searchInput, options]);

   • Render filteredOptions instead of options.

   return (
     <DropdownMenuItemsContainer>
       {filteredOptions.length > 0 ? (
         filteredOptions.map(option => (
           <MenuItemMultiSelect key={option.value} option={option} />
         ))
       ) : (
         <MenuItem>No result</MenuItem>
       )}
     </DropdownMenuItemsContainer>
   );

References

/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components
/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput.tsx
/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx
/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx

Ask Greptile

from twenty.