I am trying to use useRef
to auto focus on the mui textfield
in the app. However, the textfield
only apper after I clicked a button
, so it is not initially mounted when the app is rendered. Therefore, the inputRef.current
alway return undefined
to me when I am using the useEffect
hook, because the inputRef
is hooked only after the textfield
is appeared.
So instead I hook my inputRef.current?.focus()
on the button
like this:
<Button onClick={() => {toggleCreateWindow(); useInput.current?.focus();}}>
But it won’t work either, until I put it like an inline async function like this:
<Button onClick={ async () => { await toggleCreateWindow(); useInput.current?.focus();}}>
Now it is working properly, but the vscode always remind me 'await' has no effect on this type of expression
Do anybody know why the async function works? I mean the function should not be asynchronous because it is only a setState & toggle window function: const toggleCreateWindow = () => {setOpenCreate(!openCreate);};
Also, why the vscode is giving me this warning?
Much appreicated