diff --git a/apps/client/src/features/rundown/event-block/EventBlock.tsx b/apps/client/src/features/rundown/event-block/EventBlock.tsx index 9115bebc4..8ecabf4b5 100644 --- a/apps/client/src/features/rundown/event-block/EventBlock.tsx +++ b/apps/client/src/features/rundown/event-block/EventBlock.tsx @@ -132,9 +132,19 @@ export default function EventBlock(props: EventBlockProps) { const binderColours = colour && getAccessibleColour(colour); + // move focus to element if necessary useEffect(() => { - if (hasCursor) { - handleRef?.current?.focus(); + if (!hasCursor || handleRef?.current == null) { + return; + } + + const elementInFocus = document.activeElement; + // we know the block is the grandparent of our binder + const blockElement = handleRef.current.closest('#event-block'); + + // we only move focus if the block doesnt already contain focus + if (blockElement && !blockElement.contains(elementInFocus)) { + handleRef.current.focus(); } }, [hasCursor]); @@ -184,6 +194,7 @@ export default function EventBlock(props: EventBlockProps) { style={dragStyle} onClick={handleFocusClick} onContextMenu={onContextMenu} + id='event-block' >