Can't focus custom web component elements in Modal
Author: iSpringCreated Nov 19, 2025Updated Nov 19, 2025
- components:
modal - reactstrap version
9.2.3 - react version
19.2.0
What is happening?
I have some custom web component elements in my Modal that I can't get to focus using the tab keyboard.
What should be happening?
Modal component uses the following selector to get focusable elements - https://github.com/reactstrap/reactstrap/blob/v9.2.3/src/utils.js#L370-L383
export const focusableElements = [
'a[href]',
'area[href]',
'input:not([disabled]):not([type=hidden])',
'select:not([disabled])',
'textarea:not([disabled])',
'button:not([disabled])',
'object',
'embed',
'[tabindex]:not(.modal):not(.offcanvas)',
'audio[controls]',
'video[controls]',
'[contenteditable]:not([contenteditable="false"])',
];focusableElements only includes common raw elements and it doesn't support any custom web components, like calcite-action.
I hope that modal component can support a new prop customFocusableElementSelector: string[], so I can pass customFocusableElementSelector: ['calcite-action'] into modal.
Source: reactstrap/reactstrap