Почему автофокус не работает в ReactJS с antd?

Question

У меня проблемы с автофокусом, я много искал, но ни одно решение, которое я нашел, не сработало для меня, я использую Drawer с формой внутри, эта форма имеет некоторый Form.Item с Input, и когда Я открываю ящик, хочу сосредоточиться на form.item, кто-нибудь может мне помочь?

Вот мой код:

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

Answer 1

В соответствии с документами , autoFocus не поддерживается prop (как и на элементе <input />). Раньше я не использовал эту пользовательскую библиотеку, поэтому не могу сказать, сработает ли настройка фокуса вручную с помощью ref.

ОБНОВЛЕНИЕ:

Просто немного поиграли и похоже, что фокус можно установить вручную:

1. демо
2. код

Еще одно обновление:

демонстрация с выдвижным ящиком код