JaleelB / emblor

A fully-featured tag input component built with shadcn/ui
https://emblor.jaleelbennett.com
MIT License
674 stars 31 forks source link

Autocomplete suggestions are muted and unclickable? #19

Closed dinogomez closed 6 months ago

dinogomez commented 6 months ago

Tried using the autocomplete, this is from the props section.

image

<TagInput
      placeholder="Enter a topic"
      tags={autocompleteTags}
      enableAutocomplete
      restrictTagsToAutocompleteOptions
      autocompleteOptions={autoCompleteOptions}
      className="sm:min-w-[450px]"
      setTags={(newTags) => {
          setAutocompleteTags(newTags);
      }}
  />
dinogomez commented 6 months ago

Found a fix

Removing data-[disabled]:pointer-events-none data-[disabled]:opacity-50 on shadcn's CommandItem seems to fix it.

//components/ui/command.tsx

const CommandItem = React.forwardRef<
    React.ElementRef<typeof CommandPrimitive.Item>,
    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
    <CommandPrimitive.Item
        ref={ref}
        className={cn(
            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5
             text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground 
             data-[disabled]:pointer-events-none data-[disabled]:opacity-50", <--remove this two classnames
            className
        )}
        {...props}
    />
));