TTC

Theo's Typesafe Cult•12mo ago

tyler4949

shadcn Combobox (CommandGroup) Not Re-rendering with Component

I have this combobox component (https://github.com/tylerpashigian/t3-recipe-book/blob/feature/creatable-combobox/src/components/UI/combobox.tsx) built on shadcn’s combobox that allows for multi-select and creating a custom option if there are no search results found. I am running into an issue where a user may want to create a custom value even if there are similar results. On the branch I linked, I’ve added the

avilableOptions

avilableOptions

variable, which should add a custom option if the search value isn’t empty and the props allow for custom values. I am seeing something strange where the value is correctly added to my

availableOptions

availableOptions

(tested by logging the values) but it is not reflected in the options in the dropdown. However if I close the popover and I reopen it with the value in the search field, the option is available. I assume this is due to one of the nested components not re-rendering properly. Does anyone have an idea on this?

To provide some context, I have a recipe book and I’m selecting from predefined ingredients, but adding a new one if it doesn't exist. This works if there are no results found, but when trying to add "bacon”, “dry elbow macaroni” is being returned as a similar search result.

GitHub

t3-recipe-book/src/components/UI/combobox.tsx at feature/creatable-...

Contribute to tylerpashigian/t3-recipe-book development by creating an account on GitHub.