menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

Styled-components break react controlled forms using hooks

March 30, 2019 at 1:51pm

Styled-components break react controlled forms using hooks

March 30, 2019 at 1:51pm
I built a functional hooks component and used styled-components instead of a styles.css file. However every time I did a key press in an input field, focus was lost. After much investigation, I discovered that by reverting back to the styles.css file and abandoning styled-components, everything worked as expected. Is this a known problem when using hooks?

March 30, 2019 at 2:08pm
I have several styled-components that use hooks with no issue. It’s likely something with the implementation. Without seeing the code, it would be difficult to help much more. Do you have a reduced code example?
like-fill
1
I don't think I have encountered this problem, neither. I have based the inputs we use in my company on-top of styled-components and hooks. If you can create an example that would be great.
P.S. You have my deep respect!
Edited