javascriptreactjsmodal-dialogautofocus

React: AutoFocus on Input field inside Modal


I use Antd. I have Modal Window which consist Form. I want to focus in Input Field when user open the modal widnow. How i can do it in functional component? I try this but in not work for me:


const EditForm = ({visible, widget, onSave, onCancel}) => {
  const nameInput = useRef();
  useEffect(() => nameInput.current && nameInput.current.focus());
  const [form] = Form.useForm();
   return (
    <div>
      <Modal
        visible={visible}
        title='Edit'
        okText='Save'
        cancelText='Cancel'
        onCancel={onCancel}
        onOk={() => {
          form
            .validateFields()
            .then(values => {
              form.resetFields();
              onSave(values);
            })
            .catch(info => {
              console.log('Validate Failed:', info);
            });
        }}
      >
        <Form
          {...formItemLayout}
          layout={formLayout}
          form={form}
        >
          <Form.Item />
          <Form.Item
            name='nameWidget'
            label='Name'
          >
            <Input name='nameWidget' ref={nameInput} onChange={handleChangeName} placeholder='Введите новое название' />
          </Form.Item>

        </Form>
      </Modal>
    </div>
  );
};

Solution

  • try this way. good luck ;)

    import React, {useState, useRef, useEffect}  from 'react';
    import ReactDOM from 'react-dom';
    import 'antd/dist/antd.css';
    import './index.css';
    import { Modal, Button, Input, Form } from 'antd';
    
    
    const App = () => {
      const [visible, setVisible] = useState(false)
      const myRef = useRef();
    
      /*
       *  This is the main different
       */
      useEffect(()=>{
        if (myRef && myRef.current) {
          const { input } = myRef.current
          input.focus()
        }
    
      })
      const showModal = () => {
        setVisible(true)
      };
    
      const handleOk = e => {
        setVisible(false)
      };
    
      const handleCancel = e => {
        setVisible(false)
      };
    
      return (
        <>
          <Button type="primary" onClick={showModal}>
            Open Modal with customized button props
          </Button>
          <Modal
            title="Basic Modal"
            visible={visible}
            onOk={handleOk}
            onCancel={handleCancel}
            okButtonProps={{ disabled: true }}
            cancelButtonProps={{ disabled: true }}
          >
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <Form>
              <Form.Item>
                <Input ref={myRef} />
              </Form.Item>
            </Form>
          </Modal>
        </>
      );
    }
    
    ReactDOM.render(<App />, document.getElementById('container'));