Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[dialog] add options to allow adjustments to focus-trap behavior #11345

Closed
2 of 6 tasks
rpanichakit9541 opened this issue Jan 21, 2025 · 4 comments
Closed
2 of 6 tasks

[dialog] add options to allow adjustments to focus-trap behavior #11345

rpanichakit9541 opened this issue Jan 21, 2025 · 4 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Online Issues logged by ArcGIS Online team members. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2025-02-06 - 3.0....

Comments

@rpanichakit9541
Copy link
Contributor

rpanichakit9541 commented Jan 21, 2025 •
edited by geospatialem
Loading

Check existing issues

Description

When using calcite-dialgo with modal prop, it currently prevents the user from clicking on anything that's not contained within the dialog. In the current case we're running into an issue with this is we're using CKEditor inside the calcite-dialog which has certain options that render its own version of a pop over to allow adding link URL. Because this input is being rendered directly on the document body instead of inside the DOM within the dialog content, the user is not able to click to input the URL text or click the cancel or save button within this 3rd party pop over. (Screenshot below)

Blocked issues: #11416, #11420

Image

Acceptance Criteria

I would like to see if there's a prop that can be exposed to allow customizing the calcite-dialog to still maintain focus trap while the user uses keyboard navigation, but allow the user to use the mouse to click on UI elements like this 3rd party pop over even though the DOM elements are not rendered within the calcite-dialog.

Relevant Info

No response

Which Component

calcite-dialog with modal prop

Example Use Case

https://devtopia.esri.com/WebGIS/arcgis-metadata-editor/issues/1537

Priority impact

impact - p3 - not time sensitive

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 Online
@rpanichakit9541 rpanichakit9541 added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Jan 21, 2025
@github-actions github-actions bot added ArcGIS Online Issues logged by ArcGIS Online team members. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Jan 21, 2025
This was referenced Jan 30, 2025
Closed
Closed
@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality estimate - 8 Requires input from team, consider smaller steps. and removed needs triage Planning workflow - pending design/dev review. labels Jan 31, 2025
@geospatialem
Copy link
Member

Components to consider as part of the focus trap behavior tweaks:

  • popover
  • dialog
  • sheet
  • modal

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. and removed 0 - new New issues that need assignment. labels Feb 3, 2025
This was referenced Feb 5, 2025
Merged
Draft
Closed
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Feb 5, 2025
jcfranco added a commit that referenced this issue Feb 6, 2025
@jcfranco
feat(dialog, modal, popover, sheet): add options prop to customize fo…
454f8e8 
…cus-trap (#11453)

**Related Issue:** #11345 

## Summary

Adds `focusTrapOptions` option to allow additional customization of
focus-trapping components. It supports the following options from
https://github.com/focus-trap/focus-trap#createoptions:

* `initialFocus` – would replace popover's internal
initialFocusTrapFocus prop
* `allowOutsideClick` – supports
#10682
* `returnFocusOnDeactivate` – supports
#10682

And the following custom prop:

* `extraContainers` – allows specifying extra elements (nodes or
selectors) to focus trap (e.g., anything appending to the body, etc)
when creating/activating the trap. **Note**: if specified, elements must
exist when the focus trap is activated, if extra containers are created
afterwards, users can use `updateFocusTrapElements(extraContainers)`

This also enhances `updatesFocusTrapElements()` to accept extra
containers to allow in the focus trap if these are created after the
trap is activated.

### Notes

* A subset of https://github.com/focus-trap/focus-trap#createoptions
options are exposed as certain configurations might break component
functionality.
* `extraContainers` gets used both when creating and updating the focus
trap target containers
* Tidies up types
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. labels Feb 6, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 6, 2025

Installed and assigned for verification.

@jcfranco
Copy link
Member

jcfranco commented Feb 6, 2025

calcite-dialog, calcite-modal, calcite-popover and calcite-sheet now have a focusTrapOptions property to configure the focus trap for certain scenarios (see type for additional information):

Allowing focus within containers external to the focus trap (e.g., CKEditor):

  • If the external container is present before the focus trap is activated, use extraContainers.
  • if the external container is created after the focus trap is activated, call component.updateFocusTrapElements(extraContainers) after the elements are in the DOM.

Allowing clicks on non-focusable elements external to the focus trap (e.g., PrimeNG Dialog) – #11416, #11420

Use allowOutsideClick.

@jcfranco jcfranco mentioned this issue Feb 7, 2025
Merged
jcfranco added a commit that referenced this issue Feb 7, 2025
@jcfranco
fix(dialog, modal, popover): add type to focusTrapOptions prop (#11481
26f0435 
)

**Related Issue:** #11345 

## Summary

Adds missing type to newly added `focusTrapOptions` props.
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 7, 2025
@geospatialem
Copy link
Member

Verified with @rpanichakit9541 via an internal issue with focusTrapOptions={{ extraContainers: ".ck-body-wrapper" }} in 3.0.0-next.132 🎉

benelan pushed a commit that referenced this issue Feb 8, 2025
@jcfranco @benelan
feat(dialog, modal, popover, sheet): add options prop to customize fo…
9c2c677 
…cus-trap (#11453)

**Related Issue:** #11345 

## Summary

Adds `focusTrapOptions` option to allow additional customization of
focus-trapping components. It supports the following options from
https://github.com/focus-trap/focus-trap#createoptions:

* `initialFocus` – would replace popover's internal
initialFocusTrapFocus prop
* `allowOutsideClick` – supports
#10682
* `returnFocusOnDeactivate` – supports
#10682

And the following custom prop:

* `extraContainers` – allows specifying extra elements (nodes or
selectors) to focus trap (e.g., anything appending to the body, etc)
when creating/activating the trap. **Note**: if specified, elements must
exist when the focus trap is activated, if extra containers are created
afterwards, users can use `updateFocusTrapElements(extraContainers)`

This also enhances `updatesFocusTrapElements()` to accept extra
containers to allow in the focus trap if these are created after the
trap is activated.

### Notes

* A subset of https://github.com/focus-trap/focus-trap#createoptions
options are exposed as certain configurations might break component
functionality.
* `extraContainers` gets used both when creating and updating the focus
trap target containers
* Tidies up types
benelan pushed a commit that referenced this issue Feb 8, 2025
@jcfranco @benelan
fix(dialog, modal, popover): add type to focusTrapOptions prop (#11481
acb0f4d 
)

**Related Issue:** #11345 

## Summary

Adds missing type to newly added `focusTrapOptions` props.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Online Issues logged by ArcGIS Online team members. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2025-02-06 - 3.0.0 Feb Breaking Chang...
Development

No branches or pull requests
5 participants
@jcfranco @driskull @geospatialem @rpanichakit9541 @DitwanP