-
-
Notifications
You must be signed in to change notification settings - Fork 474
TextInput rightIcon onclick toggle icon #653
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
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:
[...
Replies: 3 comments 2 replies
-
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!
Beta Was this translation helpful? Give feedback.
All reactions
-
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..
Beta Was this translation helpful? Give feedback.
All reactions
-
😄 1
-
typescript not supported for right icon click event
Beta Was this translation helpful? Give feedback.
All reactions
-
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; }
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 6
-
You made my day
Beta Was this translation helpful? Give feedback.