title: React hooks how to set focus on InputGroup from a child Form.Control
body: <p>I'm trying to set focus on <code>&lt;InputGroup&gt;</code> element from his <code>&lt;Form.Control&gt;</code> child using <code>useRef</code> hook, in order to wrap the input and the add-on with the focus box shadow.</p>
  
  <p>This is what i'm trying to achive:
  <a href="https://i.stack.imgur.com/Rb9ch.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rb9ch.png" alt="focus on the password field"></a> </p>
  
  <p>When i focus on the element i get an error <code>inputEl.current.focus is not a function</code></p>
  
  <pre><code>&lt;Form.Group controlId="formBasicPassword"&gt;
  &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
  &lt;InputGroup ref={inputEl}&gt;
    &lt;Form.Control
      type={show ? "text" : "password"}
      placeholder="Password"
      style={{ borderRight: 0 }}
      onFocus={() =&gt; inputEl.current.focus()}
    /&gt;
    &lt;InputGroup.Append&gt;
      &lt;span
        className="input-group-text"
        style={{
          backgroundColor: "transparent",
          cursor: "pointer",
          borderLeft: 0
        }}
        onClick={() =&gt; toggle(!show)}
      &gt;
        &lt;FontAwesomeIcon icon={show ? "eye-slash" : "eye"} /&gt;
      &lt;/span&gt;
    &lt;/InputGroup.Append&gt;
  &lt;/InputGroup&gt;
  &lt;/Form.Group&gt;
  </code></pre>
  
  <p>How can i access the actual DOM element from the <code>&lt;InputGroup&gt;</code>?</p>
  
  <blockquote>
    <p><strong><a href="https://codesandbox.io/s/determined-moser-ssikt" rel="nofollow noreferrer">The full example code</a></strong></p>
  </blockquote>