[Bug]: I hope there is no feature enabled to call resolve suggestions programmatically in tagPicker.

[bhanu345-cmd]

Package

@fluentui/react

Package version

8.109

React version

18.2.0

Environment

fluentui-8.109
react-18.2.0

Current Behavior

I would like to integrate the search API into the tagPicker to fetch tags and then resolve the suggestions. However, with the current behavior of the tagPicker, I am unable to implement this as resolveSuggestions is triggered only on user input. I also want to display a loader when the API is in progress. Adding the search API in onResolveSuggestions results in repeated API calls on input change.

const onResolveSuggestions = useCallback(async (filterText: string, selectedTags?: ITag[]): Promise<ITag[]> => {
    if(apiIsInProgress){
      return loader
    }
    
    if (filterText.length === 0) {
        return [];
    }

    let filterTags = TagsfilterSuggested(filterText, selectedTags, suggestedTags);
    if (filterTags.length==0) {
        const tags = await fetchTags(filterText);
        filterTags = TagsfilterSuggested(filterText, selectedTags, tags);
        setSuggestedTags(tags);
    }

    return filterTags;
}, [suggestedTags]);

return <TagPicker
    pickerSuggestionsProps={{
        suggestionsHeaderText: 'Suggested Tags',
        noResultsFoundText: 'No tags found',
    }}
    selectedItems={selectedTags}
    onChange={(tags) => setSelectedTags(tags ?? [])}
    onResolveSuggestions={onResolveSuggestions}
    itemLimit={5}
    inputProps={{
        placeholder: 'Start typing to search tags...', // Add placeholder here
    }}
/>

Could you please suggest if there is a way to achieve this behaviour?

Expected Behavior

need a way to update suggestionList based on api call response

Reproduction

Steps to reproduce

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[dmytrokirpa]

Hello @bhanu345-cmd, thank you for opening the issue. Could you please provide a standalone reproduction on StackBlitz or CodeSandbox?

[bhanu345-cmd]

https://codesandbox.io/p/sandbox/cool-gianmarco-4vdj2d?file=%2Fsrc%2FApp.tsx%3A80%2C79

for every input trigger it is making the api call which we don't want. If we need to call api for every 2 letter input if we add condition for that then if user directly enters 3 letter word we are seeing infinite loading.

[dmytrokirpa]

for every input trigger it is making the api call which we don't want. If we need to call api for every 2 letter input if we add condition for that then if user directly enters 3 letter word we are seeing infinite loading.

I don't see any bug or issue on the component side. The component behaves as expected, providing a function that retrieves suggestions asynchronously after the input value changes. In your example, the infinite render happens because of the side effect (setState) inside onResolveSuggestions. Without it, everything works fine.

Check out this example: https://codesandbox.io/p/sandbox/eager-gates-7fz77n