renderSuggestions based on group

[ajay-pal1]

Is there any way we can render the suggestions based on the group

[JefHellemansBlockbax]

For anyone reading this in the future, unfortunately there is no easy fix with just a prop, but I worked around it by passing this function as customSuggestionsContainer prop:

function renderSuggestions(children: ReactNode) {
    const ul = children as ReactElement;
    const suggestions = ul.props.children as ReactElement[];
    // groupBy is a helper function from lodash
    const groupedSuggestions = groupBy(suggestions, suggestion => suggestion.props.suggestion.group);
    return (
        <div className="suggestionList">
            {Object.entries(groupedSuggestions).map(([group, suggestions]) =>
                cloneElement(ul, { ...ul.props, key: group }, [
                    <li key={group} className="suggestionGroup">
                        {group}
                    </li>,
                    ...suggestions
                ])
            )}
        </div>
    );
}