Fix more detached DOM leaks (#10806)

src/components/structures/AutoHideScrollbar.tsx

@@ -54,6 +54,8 @@ export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> ex
         if (this.containerRef.current && this.props.onScroll) {
             this.containerRef.current.removeEventListener("scroll", this.props.onScroll);
         }
+
+        this.props.wrappedRef?.(null);
     }
 
     public render(): React.ReactNode {

src/components/structures/MessagePanel.tsx

@@ -220,7 +220,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
     // opaque readreceipt info for each userId; used by ReadReceiptMarker
     // to manage its animations
-    private readonly readReceiptMap: { [userId: string]: IReadReceiptInfo } = {};
+    private readReceiptMap: { [userId: string]: IReadReceiptInfo } = {};
 
     // Track read receipts by event ID. For each _shown_ event ID, we store
     // the list of read receipts to display:
@@ -301,6 +301,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         this.isMounted = false;
         this.props.room?.currentState.off(RoomStateEvent.Update, this.calculateRoomMembersCount);
         SettingsStore.unwatchSetting(this.showTypingNotificationsWatcherRef);
+        this.readReceiptMap = {};
     }
 
     public componentDidUpdate(prevProps: IProps, prevState: IState): void {

src/components/structures/ScrollPanel.tsx

@@ -194,7 +194,7 @@ export default class ScrollPanel extends React.Component<IProps> {
     private bottomGrowth: number;
     private minListHeight: number;
     private heightUpdateInProgress: boolean;
-    private divScroll: HTMLDivElement;
+    private divScroll: HTMLDivElement | null = null;
 
     public constructor(props: IProps) {
         super(props);
@@ -226,6 +226,8 @@ export default class ScrollPanel extends React.Component<IProps> {
         this.unmounted = true;
 
         this.props.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize);
+
+        this.divScroll = null;
     }
 
     private onScroll = (ev: Event): void => {

src/components/views/rooms/EventTile.tsx

@@ -250,8 +250,8 @@ interface IState {
 export class UnwrappedEventTile extends React.Component<EventTileProps, IState> {
     private suppressReadReceiptAnimation: boolean;
     private isListeningForReceipts: boolean;
-    private tile = React.createRef<IEventTileType>();
+    private tile = createRef<IEventTileType>();
-    private replyChain = React.createRef<ReplyChain>();
+    private replyChain = createRef<ReplyChain>();
 
     public readonly ref = createRef<HTMLElement>();