TextInput icon onClick

[otatar]

Is your feature request related to a problem? Please describe. There is no straight way to handle TextInput's icon onClick event...example is clicking the Eye icon to unmask password input

Describe the solution you'd like A straight forward way of doing this, probably a prop called iconClick

Describe alternatives you've considered Nothing yet

[rluders]

I think that it would be desirable to implement it as:

<TextInput
    id="email4"
    type="email"
    icon={<HiMail onClick={iconClickAction} />}
    placeholder="name@flowbite.com"
    required={true}
  />

WDYT?

[otatar]

Sounds good...

[rluders]

I'm marking this one as good first issue... It should be easy, but there is a trap here. We need to find a way to pass the theme parameters to the icon.

https://github.com/themesberg/flowbite-react/blob/89d58dc03727d150e73ec753748eb98640bc84a3/src/lib/components/TextInput/TextInput.tsx#L84

So... maybe... what we are looking at is a little bit more complex than my initial idea.

{LeftIcon || renderLeftIcon && (
  <div className={theme.field.icon.base}>
    {LeftIcon ? (<LeftIcon className={theme.field.icon.svg} />) : renderIcon(theme.field.icon.svg)}
  </div>
)}

It should allow you to use:

<TextInput
    id="email4"
    type="email"
    leftIcon={HiMail}
    placeholder="name@flowbite.com"
    required={true}
  />

As well to use:

<TextInput
    id="email4"
    type="email"
    renderLeftIcon={
       (style) => <HiMail className={style} onClick={() => console.log("Clicked")} />
    }
    placeholder="name@flowbite.com"
    required={true}
  />

This approach, should not cause any breaking change.

Note: The code above is just a concept, I didn't test it, and I have no idea if there is any typo or anything.

[rluders]

Some react documentation for it: https://react.dev/reference/react/cloneElement#alternatives

[IsabelFreitas-catapult]

any updates on when this option will be available?

[SutuSebastian]

@rluders or we could stick to just adding another prop iconProps and passing them down to the rendered icon inside, while merging in the className prop.