JaleelB / emblor

A fully-featured tag input component built with shadcn/ui

Home Page:https://emblor.jaleelbennett.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

msichterman opened this issue · comments

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

Similarly, no luck with this either

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

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}
    />