Style parent component on input focus of child component in styled-components

Question

I've seen some burdensome solutions to this problem, using refs or event handlers in React. I'm wondering if there's a solution at all in styled-components.

The code below is clearly incorrect. I'm trying to figure out the easiest way to style my parent component, when my input child component has focus. Is this possible using styled-components?

What's the best way to go about this, specifically with styled-components in mind, even if it means relying on one of the React methods mentioned above?

const Parent = () => (
  <ParentDiv>
    <Input/>
  </ParentDiv>
);


const ParentDiv = styled.div`
  background: '#FFFFFF';

  ${Input}:focus & {
    background: '#444444';
  }
`;

const Input = styled.input`
  color: #2760BC;

  &:focus{
    color: '#000000';
  }
`;

score 11 · Accepted Answer · answered Jul 12 '18 at 22:42

11

Check out :focus-within! I think it's exactly what you're looking for.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

answered Jul 12 '18 at 22:42

hoodsy

894
2
11
19

This works, but it should be noted that neither IE or Edge supports this attribute. – Hans Kristian Mar 21 '19 at 07:06
There's this nice little polyfill on npm to support it - https://www.npmjs.com/package/focus-within-polyfill – Vandesh Aug 07 '19 at 10:31
Edge 79 supports this - https://caniuse.com/?search=focus-within – Sauce May 06 '22 at 13:37

lumio · Answer 2 · 2022-05-09T12:05:13.983

// update 2022:

You can use :focus-within (thanks for figuring out @hoodsy)

div:focus-within {
  background: #444;
}

<div>
  <input type="text" />
</div>

// original answer (with IE and Edge support):

Sadly there is no way of selecting the parent, based only on the child's state with pure CSS/styled-components. Although it is a working draft in CSS4, currently no browsers support it. More about this here.

I usually add an onFocus and onBlur attribute to the input field which then triggers a state change. In your case you have a stateless component. Therefore you could use innerRef to add or remove a class from the parent. But I guess you have found this solution already. Nevertheless I'll post it as well:

const styled = styled.default;

const changeParent = ( hasFocus, ref ) => {
  // IE11 does not support second argument of toggle, so...
  const method = hasFocus ? 'add' : 'remove';
  ref.parentElement.classList[ method ]( 'has-focus' );
}

const Parent = () => {
  let inputRef = null;
  
  return (
    <ParentDiv>
      <Input
        innerRef={ dom => inputRef = dom }
        onFocus={ () => changeParent( true, inputRef ) }
        onBlur={ () => changeParent( false, inputRef ) }
      />
    </ParentDiv>
  );
};

const ParentDiv = styled.div`
  background: #fff;

  &.has-focus {
    background: #444;
  }
`;

const Input = styled.input`
  color: #2760BC;

  &:focus{
    color: #000;
  }
`;

ReactDOM.render( <Parent />, document.getElementById( 'app' ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

<div id="app"></div>

A more rigid method is to convert Parent to a class, so you'd be able to use states:

const styled = styled.default;

class Parent extends React.Component {
  state = {
    hasFocus: false,
  }
  
  setFocus = ( hasFocus ) => {
    this.setState( { hasFocus } );
  }
  
  render() {
    return (
      <ParentDiv hasFocus={ this.state.hasFocus }>
        <Input
          onFocus={ () => this.setFocus( true )  }
          onBlur={ () => this.setFocus( false ) }
        />
      </ParentDiv>
    );
  }
};

const ParentDiv = styled.div`
  background: ${ props => props.hasFocus ? '#444' : '#fff' };

`;

const Input = styled.input`
  color: #2760BC;

  &:focus{
    color: #000;
  }
`;

ReactDOM.render( <Parent />, document.getElementById( 'app' ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

<div id="app"></div>

This way you are in better control of your component and can decide more easily to pass the focus/blur state to other elements.

Edge 79 supports this https://caniuse.com/?search=focus-within — Sauce, May 06 '22 at 13:36

score 1 · Answer 3 · answered Jul 29 '18 at 18:08

1

@hoodsy thanks,it worked like a charm I used like below on the parent div to change color of a label when an input focused .

     &:focus-within label{
      color: blue;
  }

answered Jul 29 '18 at 18:08

atmosfer

97
1
8

Style parent component on input focus of child component in styled-components

3 Answers3