Why the autofocus isn't working in ReactJS with antd?

Question

I'm having trouble with the autoFocus, I searched a lot, but none solutions that I found worked for me, I'm using a Drawer with a form inside, that form has some Form.Item with Input, and when I open the drawer, I want to focus on form.item, anybody can help me?

Here is my code:

<Drawer>
  <Form layout="vertical" ref={this.formRef} onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>    
    <Row gutter={16}>
      <Col span={24}>
        <Form.Item
          name="description"
          label="Description"
          rules={[
            {
              required: true,
              message: 'Please enter a description.',
            },
          ]}
        >
          <Input.TextArea autoFocus rows={10} placeholder="Please enter a description." />
        </Form.Item>
      </Col>
    </Row>
    <Row style={{ bottom: '0', position: 'absolute', right: '38px' }}>
      <Form.Item>
        <Button
          onClick={this.onClose}
          style={{ marginRight: 8 }}
        >
          Cancel
      </Button>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Row>
  </Form>
</Drawer>

Candicecandid

Answer 1

According to the docs, autoFocus is not supported prop (like it is on <input /> element). Haven't used this ui lib before, so can't say if setting focus manually by using ref would work.

UPDATE:

Just have played a bit and it looks like that focus can be set manually:

1. demo
2. code

Another update:

3. demo with drawer
4. code

Earthwork

According to Drawer Api you can hook into afterVisibleChange prop and pass collback which will set focus on element with ref – Earthwork

Cool. Can you upvote my answer and mark it as answered? – Earthwork

I already upvote your answer, but I don't have 15 point of reputation yet, so my vote didn't count yet, sorry :/ – Clarkclarke

No problem. Maybe some other time. Btw, I've upvoted your q so you need just 4 more points to earn. Happy coding :) – Earthwork

Answer 2

import React, { useCallback } from "react";

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

  return (
    <form>
      <label>
        Email
        <input name="email" type="email" ref={emailInput} />
      </label>
      <label>
        Password
        <input name="email" type="email" />
      </label>
      <button type="submit">Login</button>
    </form>
  );
};
export default Form;

Chirpy

If you need to focus your field everytime it's shown, not just mounted, see my update below: https://mcmap.net/q/1452879/-why-the-autofocus-isn-39-t-working-in-reactjs-with-antd – Honeyhoneybee

Answer 3

This works for me.

<Input ref={el => {setTimeout(() => el?.focus(), 0);}} />

Alvinia

Answer 4

const inputTagRef = useRef(null);

useEffect(() => {
    if (inputTagRef.current) {
      inputTagRef.current.focus();
    }
  }, [inputTagRef.current]);

 <Input
   ref={inputTagRef}
  />

This will add autoFocus to you input field using antd ui lib.

Glockenspiel

Answer 5

Here is an update to @manish-baral's answer when you need to focus a field every time it's shown, not just on the first mount (for example, when opening a filter (filterDropdown) in an Ant Table):

  const filterInput = React.useCallback(
    inputElement => {
      if (inputElement && visible) {
        setTimeout(() => inputElement.focus(), 0);
      }
    },
    [visible]
  );
  // ...
  <Input
    ref={filterInput}
    // ...
  />

You need to react to ant's visible prop, and to add a setTimeout of 0 to wait until the DOM node is truly ready.

Broek