How to Autofocus to Form Input Inside a reactstrap Modal
We need to use some fancy tricks to trigger autoFocus
for our form inputs and buttons rendered inside a reactstrap
modal.
Suppose we have this modal below:
<Modal>
<Form>
<ModalHeader>Type Your Input</ModalHeader>
<ModalBody>
<Input />
<Button>Submit</Button>
</ModalBody>
</Form>
</Modal>
Generally, we should be able to place the autoFocus
property on an input for the browser to force focus to that input on load.
The tricky thing here is that the reactstrap
modal has its own focus management, and it’s given the autoFocus
property when initialized.
As a result, we need to set autoFocus={false}
inside the <Modal>
element to opt-out of the default focus management. We then need to place autoFocus={true}
to the element we want to focus on inside the modal.
<Modal autoFocus={false}>
<Form>
<ModalHeader>Type Your Input</ModalHeader>
<ModalBody>
<Input autoFocus={true} />
<Button>Submit</Button>
</ModalBody>
</Form>
</Modal>