TextInput rightIcon onclick toggle icon #653
-
Hello,
but it's triggering the click event on click to input field which is correct as per above code. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
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.
-
typescript not supported for right icon click event |
Beta Was this translation helpful? Give feedback.
-
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.
So this worked for me:
Then add this to your globals.css: