[bug]: Autocomplete Suggestions

[tyleryy]

Describe the bug

Can't scroll if there are too many options in the Autocomplete Suggestions Popover.

How to reproduce

Add many tags to the autocompleteOptions where it will overflow

Link to reproduction

https://github.com/JaleelB/emblor

Additional information

No response

[Mirthis]

You can specify a max-size for the popover and add overflow auto. This is the snippet from the code I'm using:

styleClasses={{    
  autoComplete: {
    popoverContent: "max-h-[150px] overflow-y-auto",
  },
}}

[tyleryy]

I tried adding the styleClasses, but it still seems to be unscrollable. It is currently within a shadcn stepper component within a form.

https://github.com/user-attachments/assets/bee38de8-3ac7-47cb-9e53-477de85cb0d4

                              <TagInput
                                      {...field}
                                      styleClasses={{
                                        autoComplete: {
                                          popoverContent:
                                            "max-h-[200px] overflow-y-auto z-100",
                                        },
                                      }}
                                      placeholder="Enter a tag"
                                      tags={tags}
                                      className="sm:min-w-[450px]"
                                      activeTagIndex={activeTagIndex}
                                      setActiveTagIndex={setActiveTagIndex}
                                      enableAutocomplete
                                      autocompleteOptions={TagChoices}
                                      restrictTagsToAutocompleteOptions
                                      setTags={(newTags) => {
                                        setTags(newTags);
                                        setValue(
                                          "tags",
                                          newTags as [Tag, ...Tag[]]
                                        );
                                      }}
                                      truncate={5}
                                      clearAll
                                    />