• components: Modal.js
• reactstrap version master. (discovered in 8.4.1)
• react version #16
• bootstrap version #4.4

What is happening?

In my application I noticed strange behaviour when shift+tab within a modal dialog window. When using shift+tab instead of going to the previous input I would be taken to the last input in the modal dialog and would be stuck there.

I discovered this is because my modal dialog is rendered within a ShadowRoot and the "getFocusedChild" function within Modal.js does not consider this use case.

What should be happening?

Shift+Tab within a modal dialog should cycle through all the input elements.

Code

`
getFocusedChild() {
let currentFocus;
const focusableChildren = this.getFocusableChildren();

try {
  currentFocus = document.activeElement;
} catch (err) {
  currentFocus = focusableChildren[0];
}
return currentFocus;

}
`

Issue is the use of "document.activeElement". When a modal is displayed within a ShadowRoot then document.activeElement is the shadowRoot container rather than the active element within the shadow root. To fix this a recursive function such as the one found on this site https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/ is required.