Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

255
Vistas
Using React useRef() to apply focus to a TextArea inside a Popover when opened

I have an AntDesign Popover that contains a TextArea.

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

The const used for the content is as follows:

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

I understand there is a lot going on here. However, note that I have set autoFocus on, and as expected, the first time I open the Popover the TextArea does in fact get focus. However, any subsequent clicks to open that same Popover and the TextArea is no longer automatically getting focus. I investigated and discovered useRef() hooks should help.

So, near the top of my Functional Component I have declared:

const inputRef = useRef();

and note that within my TextArea I have set the ref as follows (following some examples I found online):

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

The popover code above has a call to a function onVisibleChange which points to this function:

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

Which I hoped would just re-focus the text area when the popover is made visible. However, nothing seems to happen. When I inspect the session and check the console.log(inputRef.current); above, there seems to be a focus() function to call... yet nothing is happening.

enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

With useRef, apply the ref direct to your input field.

const myRef = useRef();
...
<MyInput ref={myRef} ...

The method you showed is legacy ref assignment from class based components. useRef works different.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda