Fix iframe interference during resize by disabling pointer events - #653
Conversation
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes OPS-1823 by temporarily disabling pointer events on iframes during a resize interaction to prevent them from intercepting mouse events.
- Add
toggleIframePointerEventsto disable/enable pointer events on all iframes. - Invoke the toggle in
startResize,handleMouseUp, and in the hook cleanup. - Self-close the
<ResizeIcon>and assignResizableArea.displayName.
Comments suppressed due to low confidence (1)
packages/ui-components/src/components/resizable-area/resizable-area.tsx:62
- There are currently no tests for the iframe pointer-events toggle behavior. Consider adding unit or integration tests to verify that pointer events are correctly disabled and re-enabled during resize.
const toggleIframePointerEvents = (enabled: boolean) => {
| const startPosRef = useRef({ x: 0, y: 0, width: 0, height: 0 }); | ||
|
|
||
| const toggleIframePointerEvents = (enabled: boolean) => { | ||
| const iframes = document.querySelectorAll('iframe'); |
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
| return () => { | ||
| document.removeEventListener('mousemove', handleMouseMove); | ||
| document.removeEventListener('mouseup', handleMouseUp); | ||
| toggleIframePointerEvents(true); |
There was a problem hiding this comment.
[nitpick] This cleanup always re-enables pointer events even if no resize was active. You may want to guard this call with isResizingRef.current or track the toggle state to avoid restoring pointer events inaccurately.
| toggleIframePointerEvents(true); | |
| if (isResizingRef.current) { | |
| toggleIframePointerEvents(true); | |
| } |
| @@ -59,6 +59,13 @@ export function ResizableArea({ | |||
| const isResizingRef = useRef(false); | |||
| const startPosRef = useRef({ x: 0, y: 0, width: 0, height: 0 }); | |||
|
|
|||
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
Fixes OPS-1823.
I've triggered a deployment on UX env, it can be used for a quick test.
Demo using UX env: https://www.loom.com/share/49050daf55be4772ae2bc89b0a3ed45b