Open otatar opened 1 year ago
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?
Sounds good...
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.
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.
Some react documentation for it: https://react.dev/reference/react/cloneElement#alternatives
any updates on when this option will be available?
@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.
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