Focus after exiting the modal

[danutzcodrescu]

Issue description

• components: Modal
• reactstrap version #6.3.x
• react version #16.x.x
• bootstrap version #4.1.x

What is happening?

Several prs fixed the focus thing inside the modal and trap the focus inside as well (##1165]. However, when you exit the modal the focus is no longer is not put back on the button that opened the modal.

What should be happening?

Once the modal is closed the focus should be put on the element that triggered the open

Question/Solution

Hey guys, I know how to fix this issue, but first I would like to know if you are ok with opening a pr to fix it. My idea to solve it is the following:

• use the same philosophy as in dropdown or tooltips => the button that triggered the open of the modal would have an id <button id="openModal">Open modal</button>
• I would pass this id to the modal as prop <Modal {...props} modalTrigger="openModal" />
• Once the isOpen===false I will put the focus on the element with the passed id.

Let me know what you think about it? Does it make sense?

[TheSharpieOne]

Bootstrap's approach is a little different. They use data-toggle on the trigger/button with the value matching the id of the modal (the reverse of what you describe) and have the modal listen for click events which the data-toggle of it's id.

It's slightly different, but the key difference is that bootstrap allows multiple triggers/buttons to launch the modal and is able to return focus to the specific trigger/button which launched the modal when the modal is dismissed.

That ability to determine which element to return focus to is key.

We can tie the modal to buttons in a similar way to bootstrap by having the modal add event listeners to the document and listen for elements with the data-toggle prop with the modal's id to be triggered and then launch the modal. That way the modal knows which element triggered it and which one to place focus on after it closes.

OR, more simply, the modal could grab document.activeElement when it opens (which should be the DOM node which triggered the modal) and return focus to that once the modal is closed.

[kris7ian]

Is it possible to have a prop to manage this feature? It seems like it's causing a bit of weird behavior for me:
A user hovers the button which opens the modal (button turns blue on hover). When the user clicks the button it stays/turns blue because it's focused, it stays blue while the modal is active. Then when closing the modal, the button loses :focus, turns white again but then get's the focus back and is now blue again and stays blue until something else is clicked (which makes no sense to me and is confusing for the user).

[TheSharpieOne]

@chriggi, check out the last example on https://reactstrap.github.io/components/modals/
The prop is returnFocusAfterClose, it defaults to true, setting it to false will do what you want.