Tengo un AntDesign Popover que contiene un TextArea.

 <Popover trigger="click" content={footnoteContent} title="Footnote" visible={footnotePopoverVisible} onVisibleChange={handleFootnoteVisibleChange} > ... a custom Button... </Popover>

La const utilizada para el contenido es la siguiente:

 const footnoteContent = ( <Form form={form}> <Form.Item name={`${cellData.key}-fn`} initialValue={initialValue}> <Tooltip placement="left" title="Press Ctrl + Enter to close this window."> <Input.TextArea disabled={disabled} bordered={false} autoComplete="off" style={{ width: "300px" }} autoSize={{ minRows: 4 }} placeholder="Enter footnote" onBlur={() => save(cellData.key, form.getFieldValue(`${cellData.key}-fn`))} onKeyDown={handleKeyDown} autoFocus={true} ref={ref => { inputRef.current = ref; }} /> </Tooltip> </Form.Item> </Form> );

Entiendo que están pasando muchas cosas aquí. Sin embargo, tenga en cuenta que configuré el enfoque automático y, como era de esperar, la primera vez que abro el Popover, TextArea se enfoca. Sin embargo, cualquier clic posterior para abrir ese mismo Popover y TextArea ya no recibe el foco automáticamente. Investigué y descubrí que los ganchos useRef() deberían ayudar.

Entonces, cerca de la parte superior de mi componente funcional, he declarado:

 const inputRef = useRef();

y tenga en cuenta que dentro de mi TextArea he configurado la referencia de la siguiente manera (siguiendo algunos ejemplos que encontré en línea):

 ref={ref => { inputRef.current = ref; }}

El código emergente anterior tiene una llamada a una función onVisibleChange que apunta a esta función:

 function handleFootnoteVisibleChange (visible) { setFootnotePopoverVisible(visible); if (visible) { if (inputRef.current) { console.log(inputRef.current); inputRef.current.focus(); } } }

Lo cual esperaba que simplemente reenfocara el área de texto cuando la ventana emergente se hiciera visible. Sin embargo, nada parece suceder. Cuando inspecciono la sesión y verifico el console.log(inputRef.current); arriba, parece que hay una función focus() para llamar... pero no pasa nada.