[BUG] - Button in input contentLeft handling input onClick events

[notmedia]

Describe the bug

Your Example Website or App

https://codesandbox.io/s/sandpack-project-forked-98ti3q?file=/App.js

Steps to Reproduce the Bug or Issue

use contentLeft with button like in docs

Expected behavior

Button onClick handler triggers only when clicking on this button

Screenshots or Videos

No response

Operating System Version

macos

Browser

Chrome

[jrgarciadev]

Hey @notmedia thanks for reporting it, a workaround while we check & fix this bug is to use the labelPlaceholder prop to avoid the hover & active states, here's an example https://codesandbox.io/s/sandpack-project-forked-jubib0?file=/App.js

[vinit-churi]

Hello @jrgarciadev I would like to work on this, this is my first time working on a open source project, could you please assign me this bug

[R-J-dev]

The bug seems to occur when the StyledInputWrapper is rendered as an label. When rendering as a div, it looks like it works as it should. That specific code is located on this place: https://github.com/nextui-org/nextui/blob/69456c63aef0839f5075995db621ffd58dcf1ed6/packages/react/src/input/input.tsx#L256

I didn't had the time to figure out why using a label in this place results in this behavior, but maybe this helps a bit :)

[rukundob451]

@notmedia, is this still available?

[jrgarciadev]

Hey guys sorry for the delay please upgrade to V2.