[Modal] Disable Focus Trap does not work if assigned later

[minhiu]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

If I assign focusTrapDisabled to a modal after it was created, the focus trap is not disabled.

Expected Behavior

The focus trap should be disabled anytime afterfocusTrapDisabled is assigned to a modal

Reproduction Sample

https://codepen.io/Hieu-Pham-the-animator/pen/jENMBXy?editors=1111

Reproduction Steps

1. Create a Calcite Modal
2. Assign the focusTrapDisabled property after the modal is created
3. Notice that the focus trap is not disabled

Note:

• If focusTrapDisabled was assigned during Modal creation, it worked correctly
• allowOutsideClick in focusTrapOptions does not work for Input. We still cannot click on any input despite setting this to true.

Reproduction Version

https://codepen.io/Hieu-Pham-the-animator/pen/jENMBXy?editors=1111

Relevant Info

Calcite Version: 3.0.0

Regression?

3.0.0-next.119

Priority impact

impact - p1 - need for current milestone

Impact

In BA Web App, we need to disable the focus trap if users click outside of a Modal.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Business/Community Analyst

[jcfranco]

@minhiu Could you share more about your use case? From the looks of it, you don't need focus trapping if you want to allow interaction outside of the modal. If this is the case, you need to set focusTrapDisabled prior to opening the modal.

[minhiu]

@jcfranco

Our use case: We would like to optimize the app for both mouse and keyboard users. By default, all of our dialogs are focusTrapDisabled: false, to make sure all keyboard users will be trapped inside that dialog. For mouse users, every time they click outside of the dialog, we will turn focusTrapDisabled: true to let them interact freely outside of the dialog.

[jcfranco]

Interesting. Do you restore the trap if a user starts tabbing?

[minhiu]

@jcfranco That would be a great to have, but not needed feature from our end! Could be a great enhancement to pass in focusTrapOptions in the future!

[jcfranco]

We inadvertently removed focusTrapDisabled’s reactiveness, so we’ll look into this for next week’s patch. Thanks for reporting this!

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified for the upcoming patch with 3.1.0-next.10