title: Autofocus Input component Antd
body: <p>I'm try  to do autofocus Input component which is situated  on Drawer component. All componen i take from Antd. The problem is that the autofocus does not work immediately but only after the window opens and closes.
  Link on CodeSandbox <a href="https://codesandbox.io/s/quizzical-morning-1nhi2v?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/quizzical-morning-1nhi2v?file=/src/App.js</a></p>
  <pre><code>import './App.css';
  import 'antd/dist/antd.css';
  import {Button, Drawer, Input} from 'antd'
  import React, { useState, createContext, useRef, useEffect } from 'react';
  
  function App() {
  
    const  inputRef = useRef(true);
    const [visible, setVisible] = useState(false);
  
    const onClose = () =&gt;{ //Close Drawer 
      setVisible(false);
    } 
    const open = () =&gt;{ //Open Drawer and must be autofocus on Input
      setVisible(true);
    }
    useEffect(()=&gt;{
      console.log(visible + 'useEffect');
      if(visible){
        inputRef.current.focus();
      }
    }, [visible])
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Drawer visible={visible} onClose={onClose} autoFocus={true}&gt;
          &lt;Input ref={inputRef} &gt;&lt;/Input&gt;     
        &lt;/Drawer&gt;     
        &lt;Input ref={inputRef_}  &gt;&lt;/Input&gt;
        &lt;Button onClick={open}&gt;  Open&lt;/Button&gt;
      &lt;/div&gt;
    );
  }
  
  export default App; 
  </code></pre>