[feat]: add an "onSearchSync" prop or bypass the Debounce lag

[steffanek]

Feature description

I have 2 arrays that match the Option shape locally. Those arrays are hold by possibleOptions object (see below the mockSearch fn):

• "highlighted" with around 20 items, that I'm showing when using triggerSearchOnFocus meaning when user click on the multiselect or the search.value is empty.
• "all" with around 1000 items, for searching purposes.

When I'm using the async onSearch with a following mockSearch function with delay = 0 or by passing the prop delay={0}, I still see a debounce:

const mockSearch = async (value: string): Promise<Option[]> => {
  return new Promise(resolve => {
    setTimeout(() => {
      if (!value) {
        resolve(possibleOptions.highlighted)
      }
      const res = possibleOptions.all.filter(option =>
        option.value.toLowerCase().includes(value.toLowerCase()),
      )
      resolve(res)
    }, 0)
  })
}

When I have options locally, I should be able to have a UX without a debounce, so the result almost appear instantly. Perhaps its about bypassing the Debounce? What you think @hsuanyi-chou ? Thanks in advance!

Affected component/components

No response

Additional Context

Additional details here...

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues and PRs

[hsuanyi-chou]

Would not providing a loadingIndicator solve the problem?

[steffanek]

Would not providing a loadingIndicator solve the problem?

Unfortunately no @hsuanyi-chou

[hsuanyi-chou]

If you want filter locally, all you have to do is to build the Option type(which is { value: string; label: string; disable?: boolean; fixed?: boolean; [key:string]: string | undefined; }) and send to the defaultOptions or options prop.

cmdk will do the rest.

[steffanek]

If you want filter locally, all you have to do is to build the Option type(which is { value: string; label: string; disable?: boolean; fixed?: boolean; [key:string]: string | undefined; }) and send to the defaultOptions or options prop.

cmdk will do the rest.

@hsuanyi-chou That's what I did in the beginning. But you can only pass one full list in defaultOptions. So when the user click the multi-select (focus on) it will display the list of 1000 items. And my use case is the following:

• when the user click the multi-select (focus on) I only show a suggested/highlighted list (few items from the 1000 items)
• and when the user start to type (focus on, searching mode) it will display the search result list from the whole list of 1000 items.

[hsuanyi-chou]

If your case doesn’t need to send a request, you can simply remove the debounce and the loading state code to make it become a sync filter.

All the code is in your project, not in node_modules.

[steffanek]

@hsuanyi-chou yes I know and I tried to make this behavior based on your component, but there is plenty of logic, and could not figure it out what exactly I need to remove.

Would not be better if there was a props to make such behavior available for everyone? I can see its a popular features to have such suggested default options list when the multi-select focus is triggered.

[hsuanyi-chou]

added.

[steffanek]

@hsuanyi-chou works perfectly, many thanks! Btw are you on discord?

[hsuanyi-chou]

Yes, I am on discord. Here