fix(webui): More fixes [copilot]

Author: PeterC89

packages/webui/src/client/lib/SplitDropdown.tsx

@@ -42,6 +42,11 @@ export class SplitDropdown extends React.Component<IProps, IState> {
 		}
 	}
 
+	componentWillUnmount(): void {
+		this._popperRef = null
+		this._popperUpdate = undefined
+	}
+
 	private toggleExpco = async (e: React.MouseEvent<HTMLElement>) => {
 		e.preventDefault()
 		e.stopPropagation()

packages/webui/src/client/ui/SegmentList/LinePartPieceIndicator/LinePartIndicator.tsx

@@ -49,7 +49,6 @@ export function LinePartIndicator({
 			)
 				return
 			setIsMenuOpen(false)
-			window.removeEventListener('mousedown', onClickAway)
 		},
 		[element]
 	)
@@ -58,14 +57,16 @@ export function LinePartIndicator({
 		const shouldBeOpen = !isMenuOpen
 		setIsMenuOpen(shouldBeOpen)
 		onClickExternal?.(e)
-		window.addEventListener('mousedown', onClickAway)
 	}
 
 	useEffect(() => {
+		if (!isMenuOpen) return
+		window.addEventListener('mousedown', onClickAway)
+
 		return () => {
 			window.removeEventListener('mousedown', onClickAway)
 		}
-	}, [onClickAway])
+	}, [isMenuOpen, onClickAway])
 
 	return (
 		<>

packages/webui/src/client/ui/SegmentList/LinePartPieceIndicator/PieceIndicatorMenu.tsx

@@ -31,7 +31,7 @@ export function PieceIndicatorMenu({
 	}, [pieces.length])
 
 	useEffect(() => {
-		if (!indicatorMenuEl) return
+		if (!indicatorMenuEl || !indicatorMenuEl.isConnected) return
 
 		let timeout: NodeJS.Timeout | undefined = undefined
 
@@ -55,7 +55,7 @@ export function PieceIndicatorMenu({
 			indicatorMenuEl.removeEventListener('mouseenter', onMouseEnter)
 			indicatorMenuEl.removeEventListener('mouseleave', onMouseLeave)
 		}
-	}, [indicatorMenuEl])
+	}, [indicatorMenuEl, setIsOver])
 
 	useLayoutEffect(() => {
 		if (!indicatorMenuEl) return
@@ -78,7 +78,7 @@ export function PieceIndicatorMenu({
 						<div
 							className="segment-opl__piece-indicator-menu"
 							/** This is so that we avoid updating the state once the component has been unmounted */
-							ref={(el) => el !== null && setIndicatorMenuEl(el)}
+							ref={setIndicatorMenuEl}
 							style={styles.popper}
 							{...attributes.popper}
 						>

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

@@ -195,15 +195,22 @@ const SegmentListInner = React.forwardRef<HTMLDivElement, IProps>(function Segme
 			return
 		}
 
-		const partEl = combinedRef.current.querySelector('.segment-opl__part')
+		const segmentEl = combinedRef.current
+		const partEl = segmentEl.querySelector('.segment-opl__part')
 		if (!partEl) return
 
-		const { top, height } = combinedRef.current.getBoundingClientRect()
+		const { top, height } = segmentEl.getBoundingClientRect()
 		const absoluteTop = top + window.scrollY
 		const { height: partHeight } = partEl.getBoundingClientRect()
+		const threshold = absoluteTop + height - getHeaderHeight() - partHeight * 2 - 10
 
 		function onScroll() {
-			if (window.scrollY > absoluteTop + height - getHeaderHeight() - partHeight * 2 - 10) {
+			if (!segmentEl.isConnected) {
+				setHeaderDetachedStick(false)
+				return
+			}
+
+			if (window.scrollY > threshold) {
 				setHeaderDetachedStick(true)
 			} else {
 				setHeaderDetachedStick(false)