Field search in csv import column matching step is not good

[FelixMalfait]

When importing a CSV, the second step is to match columns with the file's header.
For each header item, we show a dropdown with our model fields which has a search bar.
But that search is very inefficient, often it doesn't even return exact matches.

[greptile-apps]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To improve the search functionality in the CSV import column matching step, update the handleSearchFilterChange function in MatchColumnSelect.tsx to perform a case-insensitive search and match substrings more effectively. Modify the function as follows:

const handleSearchFilterChange = useCallback(
  (text: string) => {
    const lowercasedFilter = text.toLowerCase();
    setOptions(
      initialOptions.filter((option) => 
        option.label.toLowerCase().includes(lowercasedFilter)
      ),
    );
  },
  [initialOptions],
);

This change ensures that the search is case-insensitive and matches any part of the option label.

References

/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep
/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components

Ask Greptile