search

JaleelB / emblor

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

`className` doesn't get applied to the `input` element properly #52

Closed msichterman closed 3 weeks ago

msichterman commented 3 weeks ago

Class name attributes are not getting applied at all

Example:

    <TagInput
      placeholder={placeholder}
      tags={tags}
      className="bg-red-500"
      setTags={setTags}
      activeTagIndex={activeTagIndex}
      setActiveTagIndex={setActiveTagIndex}
    />
image

The red bg should be applied to the input

msichterman commented 3 weeks ago

Similarly, no luck with this either

    <TagInput
      placeholder={placeholder}
      tags={tags}
      inputProps={{
        className: "bg-red-500 h-12"
      }}
      setTags={setTags}
      activeTagIndex={activeTagIndex}
      setActiveTagIndex={setActiveTagIndex}
    />
msichterman commented 3 weeks ago

Here is my workaround for now - but looks like just need to apply tailwind merge and clsx together on inputProps className attribute...

    <TagInput
      placeholder={placeholder}
      tags={tags}
      inputProps={{
        style: {
          border: "none",
          boxShadow: "none",
          outline: "none"
        }
      }}
      setTags={setTags}
      activeTagIndex={activeTagIndex}
      setActiveTagIndex={setActiveTagIndex}
    />