fix(webui): More fixes [copilot]

PeterC89 · PeterC89 · commit da8a21672d3d · 2026-06-05T15:53:12.000+01:00
diff --git a/packages/webui/src/client/lib/VirtualElement.tsx b/packages/webui/src/client/lib/VirtualElement.tsx
@@ -450,6 +450,12 @@ export class ElementObserverManager {
 					callback()
 				}
 			})
+
+			// Ensure detached entries are aggressively cleaned even without follow-up DOM mutations.
+			this.pruneDetachedObservedElements()
+			if (this.observedElements.size === 0) {
+				this.disconnectMutationObserver()
+			}
 		})
 
 		// Configure MutationObserver once and only connect/disconnect based on active observed elements.
diff --git a/packages/webui/src/client/lib/viewPort.ts b/packages/webui/src/client/lib/viewPort.ts
@@ -113,6 +113,13 @@ export function resetViewportScrollState(): void {
 	viewPortScrollingState.isProgrammaticScrollInProgress = false
 }
 
+export function clearViewportLifecycleState(): void {
+	resetViewportScrollState()
+	viewPortScrollingState.lastProgrammaticScrollTime = 0
+	focusState.isScrolling = false
+	focusState.startTime = 0
+}
+
 export async function scrollToPartInstance(
 	partInstanceId: PartInstanceId,
 	forceScroll?: boolean,
diff --git a/packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContext.tsx b/packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContext.tsx
@@ -389,6 +389,7 @@ interface PreviewSession {
 export function PreviewPopUpContextProvider({ children }: React.PropsWithChildren<{}>): React.ReactNode {
 	const currentHandle = useRef<IPreviewPopUpSession>()
 	const previewRef = useRef<PreviewPopUpHandle>(null)
+	const closeSessionRef = useRef<() => void>(() => undefined)
 
 	const [previewSession, setPreviewSession] = useState<PreviewSession | null>(null)
 	const [previewContent, setPreviewContent] = useState<PreviewContentUI[] | null>(null)
@@ -411,12 +412,39 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 		setTime(null)
 	}, [])
 
+	useEffect(() => {
+		closeSessionRef.current = closeSession
+	}, [closeSession])
+
 	useEffect(() => {
 		return () => {
 			closeSession()
 		}
 	}, [closeSession])
 
+	useEffect(() => {
+		if (!previewSession) return
+		const anchor = previewSession.anchor
+		if (!(anchor instanceof HTMLElement)) return
+
+		let rafHandle: number | undefined
+		const checkAnchorConnection = () => {
+			if (!anchor.isConnected) {
+				closeSessionRef.current()
+				return
+			}
+			rafHandle = window.requestAnimationFrame(checkAnchorConnection)
+		}
+
+		rafHandle = window.requestAnimationFrame(checkAnchorConnection)
+
+		return () => {
+			if (rafHandle !== undefined) {
+				window.cancelAnimationFrame(rafHandle)
+			}
+		}
+	}, [previewSession])
+
 	const context: IPreviewPopUpContext = {
 		requestPreview: (anchor, content, opts) => {
 			if (isDetachedHTMLElement(anchor)) {
diff --git a/packages/webui/src/client/ui/RundownView.tsx b/packages/webui/src/client/ui/RundownView.tsx
@@ -30,7 +30,7 @@ import {
 	maintainFocusOnPartInstance,
 	scrollToPartInstance,
 	getHeaderHeight,
-	resetViewportScrollState,
+	clearViewportLifecycleState,
 } from '../lib/viewPort.js'
 import { AfterBroadcastForm } from './AfterBroadcastForm.js'
 import { RundownRightHandControls } from './RundownView/RundownRightHandControls.js'
@@ -615,7 +615,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 			document.documentElement.removeAttribute('data-bs-theme')
 			window.removeEventListener('beforeunload', this.onBeforeUnload)
 			this.clearPendingDeferredCallbacks()
-			resetViewportScrollState()
+			clearViewportLifecycleState()
 
 			documentTitle.set(null)
 
diff --git a/packages/webui/src/client/ui/SegmentList/LinePartMainPiece/LinePartMainPiece.tsx b/packages/webui/src/client/ui/SegmentList/LinePartMainPiece/LinePartMainPiece.tsx
@@ -144,8 +144,13 @@ export function LinePartMainPiece({
 		}
 		setHover(true)
 
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
+
 		if (previewContents.length > 0)
-			previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
+			previewSession.current = previewContext.requestPreview(e.currentTarget, previewContents, {
 				...previewOptions,
 				time: mousePosition * (piece.instance.piece.content.sourceDuration || 0),
 				initialOffsetX: e.screenX,
diff --git a/packages/webui/src/client/ui/SegmentList/LinePartPieceIndicator/LinePartScriptPiece.tsx b/packages/webui/src/client/ui/SegmentList/LinePartPieceIndicator/LinePartScriptPiece.tsx
@@ -37,8 +37,13 @@ export function LinePartScriptPiece({ pieces }: IProps): JSX.Element {
 
 	function onMouseEnter(e: React.PointerEvent<HTMLDivElement>) {
 		// setHover(true)
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
+
 		if (previewProps?.contents && previewProps.contents.length > 0)
-			previewSession.current = previewContext.requestPreview(e.target as any, previewProps.contents, {
+			previewSession.current = previewContext.requestPreview(e.currentTarget, previewProps.contents, {
 				...previewProps.options,
 				initialOffsetX: e.screenX,
 			})
diff --git a/packages/webui/src/client/ui/SegmentList/LinePartSecondaryPiece/LinePartSecondaryPiece.tsx b/packages/webui/src/client/ui/SegmentList/LinePartSecondaryPiece/LinePartSecondaryPiece.tsx
@@ -57,8 +57,13 @@ export const LinePartSecondaryPiece: React.FC<IProps> = React.memo(function Line
 			return
 		}
 
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
+
 		if (previewProps.contents.length > 0)
-			previewSession.current = previewContext.requestPreview(e.target as any, previewProps.contents, {
+			previewSession.current = previewContext.requestPreview(e.currentTarget, previewProps.contents, {
 				...previewProps.options,
 				initialOffsetX: e.screenX,
 			})
diff --git a/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartSecondaryPieces/StoryboardSecondaryPiece.tsx b/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartSecondaryPieces/StoryboardSecondaryPiece.tsx
@@ -120,8 +120,13 @@ export function StoryboardSecondaryPiece(props: IProps): JSX.Element {
 			width,
 		})
 
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
+
 		if (previewContents.length > 0)
-			previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
+			previewSession.current = previewContext.requestPreview(e.currentTarget, previewContents, {
 				...previewOptions,
 				initialOffsetX: e.screenX,
 			})
diff --git a/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnailInner.tsx b/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnailInner.tsx
@@ -62,6 +62,11 @@ export function StoryboardPartThumbnailInner({
 		}
 		setHover(true)
 
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
+
 		const newOffset = thumbnailEl.current && getElementDocumentOffset(thumbnailEl.current)
 		if (newOffset !== null) {
 			setOrigin(newOffset)
@@ -76,7 +81,7 @@ export function StoryboardPartThumbnailInner({
 		}
 
 		if (previewContents.length > 0)
-			previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
+			previewSession.current = previewContext.requestPreview(e.currentTarget, previewContents, {
 				...previewOptions,
 				time: mousePosition * (piece.instance.piece.content.sourceDuration || 0),
 				initialOffsetX: e.screenX,
diff --git a/packages/webui/src/client/ui/SegmentTimeline/Parts/InvalidPartCover.tsx b/packages/webui/src/client/ui/SegmentTimeline/Parts/InvalidPartCover.tsx
@@ -22,8 +22,13 @@ export function InvalidPartCover({ className, invalidReason }: Readonly<IProps>)
 			return
 		}
 
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
+
 		if (invalidReason?.message && !previewSession.current) {
-			previewSession.current = previewContext.requestPreview(e.target as HTMLDivElement, [
+			previewSession.current = previewContext.requestPreview(e.currentTarget, [
 				{
 					type: 'warning',
 					content: invalidReason.message,
diff --git a/packages/webui/src/client/ui/SegmentTimeline/Renderers/MicSourceRenderer.tsx b/packages/webui/src/client/ui/SegmentTimeline/Renderers/MicSourceRenderer.tsx
@@ -32,14 +32,22 @@ export const MicSourceRenderer: React.ComponentType<IProps> = withTranslation()(
 
 		private mountLineItem(target: HTMLElement | null): void {
 			if (!this.lineItem || !target) return
+			if (!document.contains(target)) {
+				this.removeLineItem()
+				return
+			}
 
 			if (this.lineItem.parentElement !== target) {
 				try {
 					this.lineItem.remove()
 				} catch (err) {
 					logger.error(err)
 				}
-				target.appendChild(this.lineItem)
+				try {
+					target.appendChild(this.lineItem)
+				} catch (err) {
+					logger.error(err)
+				}
 			}
 		}
 
diff --git a/packages/webui/src/client/ui/SegmentTimeline/Renderers/VTSourceRenderer.tsx b/packages/webui/src/client/ui/SegmentTimeline/Renderers/VTSourceRenderer.tsx
@@ -388,7 +388,9 @@ class VTSourceRendererBase extends CustomLayerItemRenderer<IProps & WithTranslat
 			}
 		}
 
-		return this.countdownContainer && ReactDOM.createPortal(countdown, this.countdownContainer)
+		return this.countdownContainer && document.contains(this.countdownContainer)
+			? ReactDOM.createPortal(countdown, this.countdownContainer)
+			: null
 	}
 
 	render(): JSX.Element {
@@ -457,7 +459,9 @@ class VTSourceRendererBase extends CustomLayerItemRenderer<IProps & WithTranslat
 					</>
 				)}
 				{this.leftLabelNodes}
-				{this.rightLabelContainer && ReactDOM.createPortal(this.rightLabelNodes, this.rightLabelContainer)}
+				{this.rightLabelContainer &&
+					document.contains(this.rightLabelContainer) &&
+					ReactDOM.createPortal(this.rightLabelNodes, this.rightLabelContainer)}
 			</React.Fragment>
 		)
 	}
diff --git a/packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx b/packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx
@@ -9,7 +9,12 @@ import {
 import { UIStateStorage } from '../../lib/UIStateStorage.js'
 import { SpeechSynthesiser } from '../../lib/speechSynthesis.js'
 import { getElementWidth } from '../../utils/dimensions.js'
-import { isMaintainingFocus, scrollToSegment, getHeaderHeight, resetViewportScrollState } from '../../lib/viewPort.js'
+import {
+	isMaintainingFocus,
+	scrollToSegment,
+	getHeaderHeight,
+	clearViewportLifecycleState,
+} from '../../lib/viewPort.js'
 import { unprotectString } from '@sofie-automation/shared-lib/dist/lib/protectedString'
 import { equivalentArrays } from '@sofie-automation/shared-lib/dist/lib/lib'
 import { Settings } from '../../lib/Settings.js'
@@ -376,7 +381,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 				this.visibilityChangeTimeout = undefined
 			}
 
-			resetViewportScrollState()
+			clearViewportLifecycleState()
 
 			this.stopLive()
 			RundownViewEventBus.off(RundownViewEvents.REWIND_SEGMENTS, this.onRewindSegment)
diff --git a/packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx b/packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx
@@ -285,6 +285,11 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
 				previewSession.current.close()
 				previewSession.current = null
 			} else {
+				if (previewSession.current) {
+					previewSession.current.close()
+					previewSession.current = null
+				}
+
 				const { contents: previewContents, options: previewOptions } = convertSourceLayerItemToPreview(
 					layer.type,
 					piece.instance.piece,
@@ -296,7 +301,7 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
 				)
 
 				if (previewContents.length) {
-					previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
+					previewSession.current = previewContext.requestPreview(e.currentTarget, previewContents, {
 						...previewOptions,
 						time: cursorTimePosition,
 						initialOffsetX: e.screenX,
diff --git a/packages/webui/src/client/ui/Shelf/DashboardPieceButton/usePreviewPopUpSession.ts b/packages/webui/src/client/ui/Shelf/DashboardPieceButton/usePreviewPopUpSession.ts
@@ -18,7 +18,7 @@ export function usePreviewPopUpSession(args: {
 	contentStatus: ReadonlyDeep<PieceContentStatusObj> | undefined
 	enableHoverPreview?: boolean
 }): {
-	openPreview: (e: EventTarget, time: number) => void
+	openPreview: (anchor: HTMLElement, time: number) => void
 	closePreview: () => void
 	setPointerTime: (time: number) => void
 	hasPreview: boolean
@@ -57,11 +57,12 @@ export function usePreviewPopUpSession(args: {
 	}, [])
 
 	const openPreview = useCallback(
-		(e: EventTarget, time: number) => {
+		(anchor: HTMLElement, time: number) => {
 			if (!enableHoverPreview) return
 			if (!previewRequest.contents.length) return
+			if (!anchor.isConnected) return
 			previewSessionRef.current?.close()
-			previewSessionRef.current = args.previewContext.requestPreview(e as any, previewRequest.contents, {
+			previewSessionRef.current = args.previewContext.requestPreview(anchor, previewRequest.contents, {
 				...previewRequest.options,
 				time,
 			})
diff --git a/packages/webui/src/client/ui/Shelf/Renderers/L3rdListItemRenderer.tsx b/packages/webui/src/client/ui/Shelf/Renderers/L3rdListItemRenderer.tsx
@@ -99,7 +99,11 @@ export const L3rdListItemRenderer: React.FunctionComponent<ILayerItemRendererPro
 			const unprocessedPercentage = left / itemIconPosition.width
 			if (unprocessedPercentage <= 1 && !showMiniInspector) {
 				setShowMiniInspector(true)
-				previewSession.current = previewContext.requestPreview(e.target as any, previewContents, previewOptions)
+				if (previewSession.current) {
+					previewSession.current.close()
+					previewSession.current = null
+				}
+				previewSession.current = previewContext.requestPreview(e.currentTarget, previewContents, previewOptions)
 			}
 		}
 	}
@@ -117,7 +121,11 @@ export const L3rdListItemRenderer: React.FunctionComponent<ILayerItemRendererPro
 				return false
 			} else if (unprocessedPercentage >= 0 && unprocessedPercentage <= 1 && !showMiniInspector) {
 				setShowMiniInspector(true)
-				previewSession.current = previewContext.requestPreview(e.target as any, previewContents, previewOptions)
+				if (previewSession.current) {
+					previewSession.current.close()
+					previewSession.current = null
+				}
+				previewSession.current = previewContext.requestPreview(e.currentTarget, previewContents, previewOptions)
 			}
 		}
 	}
diff --git a/packages/webui/src/client/ui/Shelf/Renderers/VTListItemRenderer.tsx b/packages/webui/src/client/ui/Shelf/Renderers/VTListItemRenderer.tsx
@@ -72,7 +72,7 @@ export const VTListItemRenderer: React.FunctionComponent<ILayerItemRendererProps
 			const left = e.pageX - itemIconPosition.left
 			const unprocessedPercentage = left / itemIconPosition.width
 			if (unprocessedPercentage <= 1 && !previewSession.current) {
-				previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
+				previewSession.current = previewContext.requestPreview(e.currentTarget, previewContents, {
 					...previewOptions,
 					time: hoverScrubTimePosition,
 				})
diff --git a/packages/webui/src/client/ui/util/useSetDocumentClass.ts b/packages/webui/src/client/ui/util/useSetDocumentClass.ts
@@ -35,27 +35,38 @@ export function useOwnedElementClassToggle(
 	removeOnMount = true
 ): void {
 	const removedByHookRef = useRef(false)
+	const ownedElementRef = useRef<HTMLElement | null>(null)
 
 	useEffect(() => {
 		const element = document.querySelector(selector)
 		if (element instanceof HTMLElement && element.isConnected && removeOnMount) {
 			removedByHookRef.current = element.classList.contains(className)
 			if (removedByHookRef.current) {
 				element.classList.remove(className)
+				ownedElementRef.current = element
+			} else {
+				ownedElementRef.current = null
 			}
 		}
 
 		return () => {
-			const cleanupElement = document.querySelector(selector)
+			let cleanupElement = ownedElementRef.current
+
+			if (!cleanupElement || !cleanupElement.isConnected) {
+				const fallbackElement = document.querySelector(selector)
+				cleanupElement = fallbackElement instanceof HTMLElement ? fallbackElement : null
+			}
+
 			if (
 				removedByHookRef.current &&
-				cleanupElement instanceof HTMLElement &&
+				cleanupElement &&
 				cleanupElement.isConnected
 			) {
 				cleanupElement.classList.add(className)
 			}
 
 			removedByHookRef.current = false
+			ownedElementRef.current = null
 		}
 	}, [selector, className, removeOnMount])
 }

Original file line number	Diff line number	Diff line change
`@@ -22,8 +22,13 @@ export function InvalidPartCover({ className, invalidReason }: Readonly<IProps>)`
`22`	`22`	`return`
`23`	`23`	`}`
`24`	`24`
	`25`	`+ if (previewSession.current) {`
	`26`	`+ previewSession.current.close()`
	`27`	`+ previewSession.current = null`
	`28`	`+ }`
	`29`	`+`
`25`	`30`	`if (invalidReason?.message && !previewSession.current) {`
`26`		`- previewSession.current = previewContext.requestPreview(e.target as HTMLDivElement, [`
	`31`	`+ previewSession.current = previewContext.requestPreview(e.currentTarget, [`
`27`	`32`	`{`
`28`	`33`	`type: 'warning',`
`29`	`34`	`content: invalidReason.message,`