Styled-components: Styled input loose focus on change

[const-g]

Version

1.4.3

Steps to reproduce

1. Create Form component.
2. Within it, call a TextField Component, which is an inpunt within a div
3. Style the div around the input component with
   MaterialFormGroup = styled.div` ... `;

Expected Behavior

the input only is refreshed on typing (using onChange)

Actual Behavior

When looking at the real-DOM, the form is refreshed, and so, the input loose focus at each key press

[k15a]

Could you post a more detailed reproduction please?

[theocar]

Hi there, i have the same issue.
This is a Pure React Component with a controlled styled input.
For each keystroke, focus is lost...

import React from 'react';
import styled from 'styled-components';

import Button from './Button';

export default function SearchBar(props) {

  const CustomInput = styled.input`
    font-size: 1em;
    text-align: left;
    border: 1px solid #EFEFEF;
    padding: 0.5em;
    width: 100%;
    border-radius: 10px;
  `;

  const SearchBarWrapper = styled.div`
    display: flex;
    align-items: stretch;
    width: 280px;
    animation: ${props.animation}
  `

  const PrimaryColumn = styled.div`
    flex: 2
  `
  const SecondaryColumn = styled.div`
    flex: 1
  `

  return (
    <SearchBarWrapper>
      <PrimaryColumn>
        <CustomInput
          type="text"
          placeholder="City"
          onChange={props.onChange}
          value={props.value}
        />
      </PrimaryColumn>
      <SecondaryColumn>
        <Button label="GO" primary/>
      </SecondaryColumn>
    </SearchBarWrapper>
);
}

[k15a]

@theocar If you move the styled components out of the SearchBar Component it should work.

import React from 'react';
import styled from 'styled-components';

import Button from './Button';


const CustomInput = styled.input`
    font-size: 1em;
    text-align: left;
    border: 1px solid #EFEFEF;
    padding: 0.5em;
    width: 100%;
    border-radius: 10px;
`;

const SearchBarWrapper = styled.div`
    display: flex;
    align-items: stretch;
    width: 280px;
    animation: ${props.animation}
`

const PrimaryColumn = styled.div`
    flex: 2
`
const SecondaryColumn = styled.div`
    flex: 1
`


export default function SearchBar(props) {
  return (
    <SearchBarWrapper>
      <PrimaryColumn>
        <CustomInput
          type="text"
          placeholder="City"
          onChange={props.onChange}
          value={props.value}
        />
      </PrimaryColumn>
      <SecondaryColumn>
        <Button label="GO" primary/>
      </SecondaryColumn>
    </SearchBarWrapper>
);
}