You may look for issues:

1. 52% Customizing components theme does not work for Menu background color #39512

_{🤖 By issues-similarity-analysis}

temporary solution.

const textInput = useRef(null);

setTimeout(() => {
    textInput.current.focus()
}, 0);

return <Input ref={textInput} />;

temporary solution.

const textInput = useRef(null);

setTimeout(() => {
    textInput.current.focus()
}, 0);

return <Input ref={textInput} />;

I also have a problem with this in v5 but when using Forms with rules. I haven't managed to find a method that of setting focus without using setTimeout with 1s delay which is too long. Any less and it can sometimes not work as the modal can take a longer time to display.

Another solution I found is adding a ref and setting focus using useEffect. This causes the focus to be added, removed, and added again which triggers the form rule and displays an error message.
E.g.

  const myRef = useRef();

  useEffect(()=>{
    if (myRef && myRef.current) {
      const { input } = myRef.current
      input.focus()
    }
  })

Here it is mentioned that destroyOnClose can be used. I can see it apply the focus but it is then removed again to display the form rule error message.

Overall setTimeout is the only solution I can find but it requires a very long delay. I would expect the framework to handle this for us with the autofocus property in a similar fashion to other frameworks. (E.g. PrimeVue) so it it minimal work for the developer.

https://github.com/react-component/dialog/blob/bb69ed382561d0fa8a65975ef1854389bae6a0ef/src/Dialog/index.tsx#L84

How to handle this elegantly, now that there is a focus on management needs. Can you only call foucs methods with a ref?

1 case :

const emailInput = useCallback(
(inputElement: InputRef) => {
        if (inputElement) {
          inputElement.focus();
        }
  }, []);

  <Input
  ref={emailInput}
  value={value}
  onChange={onChange}
/>      

2 case

  const emailInput = useRef<InputRef>(null);
  useEffect(() => {
    if (emailInput.current) {
      emailInput.current.focus();
    }
  }, [emailInput]);

    <Input
  ref={emailInput}
  value={value}
  onChange={onChange}
/>      

It is working with the ref, but only on initial open, when you close and open again it won't work

temporary solution.

const textInput = useRef(null);

setTimeout(() => {
    textInput.current.focus()
}, 0);

return <Input ref={textInput} />;

I also have a problem with this in v5 but when using Forms with rules. I haven't managed to find a method that of setting focus without using setTimeout with 1s delay which is too long. Any less and it can sometimes not work as the modal can take a longer time to display.

Another solution I found is adding a ref and setting focus using useEffect. This causes the focus to be added, removed, and added again which triggers the form rule and displays an error message. E.g.

  const myRef = useRef();

  useEffect(()=>{
    if (myRef && myRef.current) {
      const { input } = myRef.current
      input.focus()
    }
  })

Here it is mentioned that destroyOnClose can be used. I can see it apply the focus but it is then removed again to display the form rule error message.

Overall setTimeout is the only solution I can find but it requires a very long delay. I would expect the framework to handle this for us with the autofocus property in a similar fashion to other frameworks. (E.g. PrimeVue) so it it minimal work for the developer.

I think doing it this way like it mentioned above, works well. (Don't use destroyOnClose in Modal)
Try The exact way I'm doing it.(Which works the best):

const [modalVisible, setModalVisible] = useState(false);

// Using useRef to autoFucs the input filed in the model
  const inputRef = useRef(null);

// Here is the inputRef foucs, using setTimeout(()=>{}, 0); with zero on purpose
useEffect(() => {
  if (modalVisible && inputRef.current) {
    setTimeout(() => {
      inputRef.current.focus();
    }, 0);
  }
}, [modalVisible, inputRef]);


<Modal> // don't user destoryOnClose in opening tag of Modal
    <Input autoFocus autoComplete="off" ref={inputRef} />
</Modal>

I think doing it this way like it mentioned below, works well. (Don't use destroyOnClose in Modal)
Try The exact way I'm doing it.(Which works the best):

const [modalVisible, setModalVisible] = useState(false);

// Using useRef to autoFucs the input filed in the model
  const inputRef = useRef(null);

// Here is the inputRef foucs, using setTimeout(()=>{}, 0); with zero on purpose
useEffect(() => {
  if (modalVisible && inputRef.current) {
    setTimeout(() => {
      inputRef.current.focus();
    }, 0);
  }
}, [modalVisible, inputRef]);


<Modal> // don't user destoryOnClose in opening tag of Modal
    <Input autoFocus autoComplete="off" ref={inputRef} />
</Modal>

It appears that the PR has been in a draft state for over a year.
Can anyone please provide an update on this issue?

Wait until the modal is open and then focus.

// antd v5.21.6
export function Overlay() {
  const autoFocusRef = useRef<Nullable<InputRef>>(null)

  return (
    <Modal afterOpenChange={(open) => open && autoFocusRef.current?.focus()}>
      <Input ref={autoFocusRef} />
    </Modal>
  )
}