SOFIE-282 | fix scroll issues in properties editor

Author: anteeek

packages/webui/src/client/ui/RundownView.tsx

@@ -1378,6 +1378,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 					<SelectedElementsContext.Consumer>
 						{(selectionContext) => {
 							const isPropertiesPanelOpen = selectionContext.listSelectedElements().length > 0
+
 							return (
 								<div
 									className={classNames('rundown-view', {

packages/webui/src/client/ui/RundownView/SelectedElementsContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useState } from 'react'
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import {
 	AdLibActionId,
 	PartId,
@@ -215,12 +215,21 @@ export function useSelectedElements(
 	const [segment, setSegment] = useState<DBSegment | undefined>(undefined)
 	const rundownId = piece ? piece.startRundownId : part ? part.rundownId : segment?.rundownId
 
+	const lastValidPiece = useRef<Piece | undefined>(undefined)
+
 	useEffect(() => {
 		clearPendingChange() // element id changed so any pending change is for an old element
 
 		const computation = Tracker.nonreactive(() =>
 			Tracker.autorun(() => {
-				const piece = Pieces.findOne(selectedElement?.elementId)
+				let piece = Pieces.findOne(selectedElement?.elementId)
+
+				if (!piece && lastValidPiece.current && lastValidPiece.current._id === selectedElement?.elementId) {
+					piece = lastValidPiece.current
+				} else if (piece) {
+					lastValidPiece.current = piece
+				}
+
 				const part = UIParts.findOne({ _id: piece ? piece.startPartId : selectedElement?.elementId })
 				const segment = Segments.findOne({ _id: part ? part.segmentId : selectedElement?.elementId })
 

packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx

@@ -176,15 +176,14 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
 					innerPiece.userEditProperties?.globalProperties ||
 					innerPiece.userEditProperties?.operations?.length
 				)
+
 				if (!hasEditableContent) return
 
 				const pieceId = innerPiece._id
-				if (!selectElementContext.isSelected(pieceId)) {
-					RundownViewEventBus.emit(RundownViewEvents.CLOSE_NOTIFICATIONS)
-					selectElementContext.clearAndSetSelection({ type: 'piece', elementId: pieceId })
-				} else {
-					selectElementContext.clearSelections()
-				}
+
+				RundownViewEventBus.emit(RundownViewEvents.CLOSE_NOTIFICATIONS)
+				selectElementContext.clearAndSetSelection({ type: 'piece', elementId: pieceId })
+
 				// Until a proper data structure, the only reference is a part.
 				// const partId = this.props.part.instance.part._id
 				// if (!selectElementContext.isSelected(partId)) {

packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx

@@ -45,8 +45,9 @@ export function PropertiesPanel(): JSX.Element {
 		const pieceChangedId = selectedElement?.type === 'piece' && hadPiece && piece === undefined
 
 		if (pieceChangedId) {
-			setHadPiece(false)
-			clearSelections()
+			console.log('clearing in hook')
+			// setHadPiece(false)
+			// clearSelections()
 		}
 	}, [selectedElement, piece, hadPiece, clearSelections])