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}
/>