diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.jsx b/platform/ui/src/components/ViewportPane/ViewportPane.jsx index b1374ca14..7c9bea5bf 100644 --- a/platform/ui/src/components/ViewportPane/ViewportPane.jsx +++ b/platform/ui/src/components/ViewportPane/ViewportPane.jsx @@ -14,6 +14,7 @@ function ViewportPane({ onInteraction, acceptDropsFor, }) { + let dropElement = null; const [{ isHovered, isHighlighted }, drop] = useDrop({ accept: acceptDropsFor, // TODO: pass in as prop? @@ -22,7 +23,7 @@ function ViewportPane({ const isOver = monitor.isOver(); if (canDrop && isOver && onDrop) { - onInteraction(); + onInteractionHandler(); onDrop(droppedItem); } }, @@ -33,16 +34,32 @@ function ViewportPane({ }), }); + const focus = () => { + if (dropElement) { + dropElement.focus(); + } + }; + + const onInteractionHandler = () => { + onInteraction(); + focus(); + }; + + const refHandler = element => { + drop(element); + dropElement = element; + }; + return (
{}; +const noop = () => { }; ViewportPane.defaultProps = { onInteraction: noop, diff --git a/platform/viewer/src/components/ViewportGrid.jsx b/platform/viewer/src/components/ViewportGrid.jsx index e6384b82e..4052cbd0a 100644 --- a/platform/viewer/src/components/ViewportGrid.jsx +++ b/platform/viewer/src/components/ViewportGrid.jsx @@ -115,15 +115,17 @@ function ViewerViewportGrid(props) { viewportComponents ); + const onInterationHandler = () => { + setActiveViewportIndex(viewportIndex); + }; + viewportPanes[i] = ( { - setActiveViewportIndex(viewportIndex); - }} + onInteraction={onInterationHandler} isActive={activeViewportIndex === viewportIndex} >