If I set a className for max width on TextInput the invalid wrapper extends past it

[scottdickerson]

What package(s) are you using?

• [ ] carbon-components
• [x] carbon-components-react

Detailed description

Describe in detail the issue you're having. I used the className prop of the TextInput to set a maxWidth on the input field for certain TextInput types. It works! Unfortunately if the TextInput is invalid, the wrapper class highlights extend way beyond the max width of the Text Input. Can we also send the className prop along on the wrapper, or give a separate wrapper class prop that we can override?

Is this issue related to a specific component? TextInput

Additional information

[emyarod]

would you mind creating a reduced test case in Code Sandbox for easier testing and debugging?

[scottdickerson]

sure no problem: https://codesandbox.io/s/textinput-example-47zv7 @emyarod

[tw15egan]

Confirmed. Seems like this is solved by passing the class down the wrapper instead of the input itself. Seems like this would be considered a breaking change since some users could be sending down a class they want to send to the input, so we may need to add a new prop to allow adding classes to the wrapper.

[emyarod]

since the wrapper element is still modifiable with an alternate selector I think that would be the workaround in this case. not sure if there's a definite fix for this

[sstrubberg]

Fixed with v11.