calcite-modal: Option to prevent modal from returning focus when modal is removed from the DOM (when focus trap is enabled).

[jmanke]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

Currently, when a modal with a focus trap is removed from the DOM, it refocuses on the previously active element. This causes issues when the modal is used to delete an item. After deletion, the focus trap attempts to refocus on the now-deleted item, leading to unintended scrolling behavior, especially when the item is in a virtual list.

Here's the workflow:

1. Click a calcite-button within a calcite-card to trigger a deletion modal. (The card is within a scrollable container.)
2. Confirm deletion.
3. The item is deleted, and the modal is closed.
4. The focus trap within the modal refocuses on the now-deleted item, causing unexpected scrolling behavior.

One solution could be to disable the focus trap during deletion. However, the focusTrapDisabled property is being deprecated according to this calcite issue.

An alternative could be to use the returnFocusOnDeactivate boolean property in the focus trap to disable this behavior (internally in calcite).

Acceptance Criteria

Ability to prevent a modal from automatically setting focus when disconnected from the DOM.

Relevant Info

Currently using [email protected]

Which Component

calcite-modal

Example Use Case

The modal is being used to delete an item, so when the item is deleted, the focus trap will attempt to refocus on that item, causing some unintended behaviors. In our case, the item is in a virtual list so the focus is causing the list to scroll in unintended ways.

If there was a property to disable this refocus behavior, then the unintended scrolling behavior could be prevented and we could control where the focus instead needs to go.

Priority impact

p3 - want for upcoming milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Dashboards