自动对焦输入组件 Antd

Question

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 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; 

Answer 1

You can try this. I tested and it worked.

if (visible) {
  setTimeout(() => {
    inputRef.current.focus();
  }, [500]);
}