Wrapping a input with a styled component has issues with onFocus/onBlur events

Current behavior: I tried wrapping a input with a styled component like this:

 <Wrapper>
      <input
        type="text"
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
      />
      {isFocused && "test"}
</Wrapper>

I need to click twice on the input to focus and be able to write text.

To reproduce:

Link to Sandbox

1. Try to click on the input
2. You see the isFocused state is changed and displays Focused
3. Click again to gain control of the input and now you can start writing

Expected behavior: The browser’s default behavior (click once)

Environment information:

• react version: 16.12.0
• @emotion/core version: “^10.0.28”,
• @emotion/styled version: “^10.0.27”,

[Andarist]

You need to move out your Wrapper out of render. You are recreating a component’s type each render and thus React loses the whole state (including focus) for it. Fixed sandbox: https://codesandbox.io/s/styled-div-focus-issue-ojd5r

It’s basically like if you would do smth like this:

function Comp() {
  const Another = () => <input/>
  return <Another/>
}

Which is an anti-pattern because React won’t even be able to know that Another is the same component between renders.

[Andarist]

what makes you say that? I’d like to understand why. Declaring the components in the render functions results in much cleaner code in our project. Is it a performance concern?

Yes, it’s a performance concern and not because of Emotion but because of React. By declaring components in render you force them to remount which each rerender as React won’t be available to reconcile them.