#4343·reactstrap

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.

Image

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

bash
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.