Intento hacer el componente de entrada de enfoque automático que se encuentra en el componente del cajón. Todos los componentes que tomo de Antd. El problema es que el enfoque automático no funciona inmediatamente, sino solo después de que la ventana se abre y se cierra. Enlace en CodeSandbox https://codesandbox.io/s/quizzical-morning-1nhi2v?file=/src/App.js

 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 = () =>{ //Close Drawer setVisible(false); } const open = () =>{ //Open Drawer and must be autofocus on Input setVisible(true); } useEffect(()=>{ console.log(visible + 'useEffect'); if(visible){ inputRef.current.focus(); } }, [visible]) return ( <div className="App"> <Drawer visible={visible} onClose={onClose} autoFocus={true}> <Input ref={inputRef} ></Input> </Drawer> <Input ref={inputRef_} ></Input> <Button onClick={open}> Open</Button> </div> ); } export default App;