Calcite Shell Panel: Resizable with iframe in calcite shell

[rslibed]

Check existing issues

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

Actual Behavior

Resize handle does not expand the shell panel as expected when calcite shell contains an iframe.

Expected Behavior

Resize handle does expand the shell panel when calcite shell contains an iframe.

Reproduction Sample

https://codepen.io/rslibed/pen/MWLmmBY

Reproduction Steps

Use resize handle to increase/decrease shell panel size. Notice that reducing the panel size does not have any issues; however, increasing the panel size does not continue to expand as expected.

Reproduction Version

1.10.0

Relevant Info

No response

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

Received a request to be able to resize panel within ArcGIS Instant Apps configuration experience.

Calcite package

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

Esri team

ArcGIS Instant Apps

[macandcheese]

Note (can make a separate issue but adding from Teams) - There's a similar issue with iFrame / Tooltip dismissal - if the cursor moves from the tooltip reference element to an iFrame, it's never dismissed.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

In 1.12.0-next.6 this works well when the mouse cursor hovers over the shell's "header" slot and with the arrow keys, but when the mouse cursor is anywhere else, it doesn't seem to respond at all - is that intended, @driskull?

[driskull]

No, not intended. Ill see whats going on there.

[driskull]

@geospatialem @jcfranco according to https://www.gyrocode.com/articles/how-to-detect-mousemove-event-over-iframe-element/

Seems like we would need to query for all iframes while the mouse is being moved and set them to pointer-events:none and then set them back when mouse is done moving.

@jcfranco is this something we want to proceed doing?

[jcfranco]

Querying for all iframes and modifying them could get tricky and might still run into issues for complex content (e.g., iframes within shadow roots 😱). Would it be possible to use an overlay on the shell or document to track mouse movement when resizing is initiated via pointer?

[driskull]

Yeah I can try that. It would need to be handled in the shell and not the shell-panel so maybe via some internal event.

[driskull]

@geospatialem are we only concerned with iframes within the shell content? Not iframes within shell panels, etc right?

Note (can make a separate issue but adding from Teams) - There's a similar issue with iFrame / Tooltip dismissal - if the cursor moves from the tooltip reference element to an iFrame, it's never dismissed.

@macandcheese can you create a separate issue if you haven't already? This is going to be more tricky. We might not be able to solve this one because we can't just disable pointer events on mouse move.

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

Verified locally on main 🍬