TextInput rightIcon onclick toggle icon

[swanil009]

Hello,
I've Tried to add an input field with right aligned addon icon and expecting to get click event on click of the icon in my tsx file, below code I have tried

<TextInput rightIcon={passwordVisible ? HiEye : HiEyeOff } onClick={toggelInputPassword} id="password" name="password" type={passwordVisible ? "text" : "password"} />

but it's triggering the click event on click to input field which is correct as per above code.
But can any one help to achieve the same event only on click of the right Input icon and not the whole input field here in flowbite-react.

[tulup-conner]

It looks like we haven't got support for that. I think the best solution would probably be to rewrite the TextInput to allow children, including an icon:

<TextInput onClick={} ..>
  <TextInput.Icon position="after" onClick={} />
</TextInput>

Otherwise, we're going to make this component have too many props IMO.

That's kind of complex - if you're able to contribute something like that it would be super helpful, but either way, now it's on everyone's radar!

[swanil009]

Yes it will be good if we allow children for the TextInput.
For now I'll manage to handle this with custom input filed.
Later I will check if I can contribute something related to this.
Thank you for your feedback..

[rangerisrael]

typescript not supported for right icon click event

[mikenath223]

So this worked for me:

      <TextInput
          className="flex h-full grow p-0"
          sizing="sm"
          name="password"
          type="password"
          rightIcon={() =>
          !showPassword ? (
            <EyeIcon
               onClick={() => setShowPassword(!showPassword)}
               className="cursor-pointer"
               fontSize={12}
               width={16}
            />
           ) : (
            <EyeSlashIcon
               onClick={() => setShowPassword(!showPassword)}
               className="cursor-pointer"
               fontSize={12}
               width={16}
            />
           )
          }
       />

Then add this to your globals.css:

  [data-testid="right-icon"] {
     pointer-events: unset;
  }