Slowing down/freezing when using creatable about shadcn-ui-expansions

[hsuanyi-chou]

Try-and-error many times and I found it's related to cmdk.

You can provide a filter in Command and the creatable selector won't freeze.

return (
      <Command
        {...commandProps}
        onKeyDown={(e) => {
          handleKeyDown(e);
          commandProps?.onKeyDown?.(e);
        }}
        className={cn('overflow-visible bg-transparent', commandProps?.className)}
        shouldFilter={
          commandProps?.shouldFilter !== undefined ? commandProps.shouldFilter : !onSearch
        } // When onSearch is provided, we don't want to filter the options. You can still override it.
+        filter={(value, search) => {
+          return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
+        }}
      >

here is a fixed version if you want to fix it yourself.

or an easy way to fix it without modifying multipleSelector.tsx by giving prop:

const MultipleSelectorCreatable = () => {
  return (
    <div className="w-full px-10">
      <MultipleSelector
        defaultOptions={OPTIONS}
        placeholder="Type something that does not exist in dropdowns..."
        creatable
        emptyIndicator={
          <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
            no results found.
          </p>
        }
+        commandProps={{
+          filter: (value, search) => {
+              return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;  // write your own filtering logic.
+          },
+        }}
      />
    </div>
  );
};

---

An known issue:
The filtering logic value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1; will cause CreatableItem disappear when typing a space in the end. For example: Hello , a space in the end and the CreatableItem disappeared.

but Hello my friend works fine.

Because the value in cmdk is trim() so that they won't match.