title: Set autofocus for input on every render of parent component
body: <p>I have a component with input with Style applied called StyledInput which is in NumericInputComponent which is being used in a PriceComponent. This is part of a line. Whenever I switch between the lines, I want to focus on this input. The autofocus works only for the first render and hence when I switch, it does not autofocus again. How do I force focus for every switch. </p>
  
  <p>I tried forcing re render of Price Component but that did not help with the focus. </p>
  
  <p>In Numeric Input</p>
  
  <pre><code>
  const StyledInput = styled('input')`
      transition: all 150ms;
      &amp;:hover {
          border: 1px solid ${Colors.brands['04']};
      }    
  `;
  
  
     &lt;StyledInput
                  type='tel'
                  autoComplete='off'
                  autoFocus={this.props.autoFocus}
                  min={this.props.min}
                  max={this.props.max}
                  step={this.props.step}
                  value={this.props.value}
                  onFocus={this.props.onFocus}
                  disabled={this.props.disabled}
                  onClick={this.stopPropagation}
                  required={this.props.required}
                  onChange={this.handleInputChange}
                  className={this.props.className}
                  onBlur={this.props.onBlur}
                  ref={input =&gt; input &amp;&amp; input.focus()}
              /&gt;
  </code></pre>
  
  <p>Inside PriceComponenet</p>
  
  <pre><code>const StyledNumericInput = styled(NumericInput)`
      padding: 0;          // remove mi-form-control padding
      text-align: center;
      &amp;:required:focus {
          background-image: none;
      }
  `;
  
  &lt;StyledNumericInput
                      autoFocus={this.shouldAutoFocus(this.props)}
                      className='mi-class'
                      value={this.state.value}
                      onChange={this.handleInputChange}
                      min={this.props.line ? -99.9 : 0.0}
                      id={'priceEdit' + this.props.index}
                      max={99.9}
                      step={0.1}
                      onFocus={Utilities.selectAllText}
                      required
                  /&gt;
  
  Say I have 3 lines, everytime I swtich between lines (which will have name, qty and price), it should always focus on price, even when the name and qty does not change.
  </code></pre>