Reactstrap: Auto Focus Button on Modal Render

[paulevmo]

Issue description

• components: Button

I have a super simple modal that I want the user to be able to quickly acknowledge and close with nothing more than an enter press.

What is the best way to auto focus a button when rendered in a modal? On the <Button> element I have tried:

• active, active={true} (from reactstrap docs)
• autoFocus, autoFocus={true} (from bootstrap docs)
• autofocus (basic html)

Steps to reproduce issue

<Modal..>...<ModalFooter..>...<Button ??? >

Saw on the v4 bootstrap docs that "Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript". Is this really my only option?

[sideisra]

Hi, did you close the issue because you found a solution?

[TheSharpieOne]

Add autoFocus={false} to your modal to opt-out of the modal's focus management, then autoFocus on elements inside the modal can do their thing.
See this example: https://www.webpackbin.com/bins/-Kpuo0BUJpkb53Cy3poH

[sideisra]

I am useing typescript and can't use autoFocus on my modal because the typings don't have it yet. Do you know a way to add the prop or use the js directly?