Fix: Remove onUserScroll handler and merge it with onScroll

Author: justjanne

src/components/structures/MessagePanel.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef, KeyboardEvent, ReactNode, SyntheticEvent, TransitionEvent } from 'react';
+import React, { createRef, KeyboardEvent, ReactNode, TransitionEvent } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { Room } from 'matrix-js-sdk/src/models/room';
@@ -170,9 +170,6 @@ interface IProps {
     // callback which is called when the panel is scrolled.
     onScroll?(event: Event): void;
 
-    // callback which is called when the user interacts with the room timeline
-    onUserScroll(event: SyntheticEvent): void;
-
     // callback which is called when more content is needed.
     onFillRequest?(backwards: boolean): Promise<boolean>;
 
@@ -1030,7 +1027,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                     ref={this.scrollPanel}
                     className={classes}
                     onScroll={this.props.onScroll}
-                    onUserScroll={this.props.onUserScroll}
                     onFillRequest={this.props.onFillRequest}
                     onUnfillRequest={this.props.onUnfillRequest}
                     style={style}

src/components/structures/RightPanel.tsx

@@ -231,6 +231,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
                     mxEvent={cardState.threadHeadEvent}
                     initialEvent={cardState.initialEvent}
                     isInitialEventHighlighted={cardState.isInitialEventHighlighted}
+                    initialEventScrollIntoView={cardState.initialEventScrollIntoView}
                     permalinkCreator={this.props.permalinkCreator}
                     e2eStatus={this.props.e2eStatus}
                 />;

src/components/structures/RoomView.tsx

@@ -768,21 +768,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         }
     }
 
-    private onUserScroll = () => {
-        if (this.state.initialEventId && this.state.initialEventScrollIntoView) {
-            debuglog("Removing scroll_into_view flag from initial event");
-            dis.dispatch<ViewRoomPayload>({
-                action: Action.ViewRoom,
-                room_id: this.state.room.roomId,
-                event_id: this.state.initialEventId,
-                highlighted: this.state.isInitialEventHighlighted,
-                scroll_into_view: false,
-                replyingToEvent: this.state.replyToEvent,
-                metricsTrigger: undefined, // room doesn't change
-            });
-        }
-    };
-
     private onRightPanelStoreUpdate = () => {
         this.setState({
             showRightPanel: RightPanelStore.instance.isOpenForRoom(this.state.roomId),
@@ -1311,6 +1296,19 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             });
         }
         this.updateTopUnreadMessagesBar();
+
+        if (this.state.initialEventId && this.state.initialEventScrollIntoView) {
+            debuglog("Removing scroll_into_view flag from initial event");
+            dis.dispatch<ViewRoomPayload>({
+                action: Action.ViewRoom,
+                room_id: this.state.room.roomId,
+                event_id: this.state.initialEventId,
+                highlighted: this.state.isInitialEventHighlighted,
+                scroll_into_view: false,
+                replyingToEvent: this.state.replyToEvent,
+                metricsTrigger: undefined, // room doesn't change
+            });
+        }
     };
 
     private injectSticker(url: string, info: object, text: string, threadId: string | null) {
@@ -2066,7 +2064,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 eventScrollIntoView={this.state.initialEventScrollIntoView}
                 eventPixelOffset={this.state.initialEventPixelOffset}
                 onScroll={this.onMessageListScroll}
-                onUserScroll={this.onUserScroll}
                 onReadMarkerUpdated={this.updateTopUnreadMessagesBar}
                 showUrlPreview={this.state.showUrlPreview}
                 className={this.messagePanelClassNames}

src/components/structures/ScrollPanel.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef, CSSProperties, ReactNode, SyntheticEvent, KeyboardEvent } from "react";
+import React, { createRef, CSSProperties, ReactNode, KeyboardEvent } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import Timer from '../../utils/Timer';
@@ -109,10 +109,6 @@ interface IProps {
     /* onScroll: a callback which is called whenever any scroll happens.
      */
     onScroll?(event: Event): void;
-
-    /* onUserScroll: callback which is called when the user interacts with the room timeline
-     */
-    onUserScroll?(event: SyntheticEvent): void;
 }
 
 /* This component implements an intelligent scrolling list.
@@ -593,29 +589,21 @@ export default class ScrollPanel extends React.Component<IProps> {
      * @param {object} ev the keyboard event
      */
     public handleScrollKey = (ev: KeyboardEvent) => {
-        let isScrolling = false;
         const roomAction = getKeyBindingsManager().getRoomAction(ev);
         switch (roomAction) {
             case KeyBindingAction.ScrollUp:
                 this.scrollRelative(-1);
-                isScrolling = true;
                 break;
             case KeyBindingAction.ScrollDown:
                 this.scrollRelative(1);
-                isScrolling = true;
                 break;
             case KeyBindingAction.JumpToFirstMessage:
                 this.scrollToTop();
-                isScrolling = true;
                 break;
             case KeyBindingAction.JumpToLatestMessage:
                 this.scrollToBottom();
-                isScrolling = true;
                 break;
         }
-        if (isScrolling && this.props.onUserScroll) {
-            this.props.onUserScroll(ev);
-        }
     };
 
     /* Scroll the panel to bring the DOM node with the scroll token
@@ -965,7 +953,6 @@ export default class ScrollPanel extends React.Component<IProps> {
             <AutoHideScrollbar
                 wrappedRef={this.collectScroll}
                 onScroll={this.onScroll}
-                onWheel={this.props.onUserScroll}
                 className={`mx_ScrollPanel ${this.props.className}`}
                 style={this.props.style}
             >

src/components/structures/ThreadView.tsx

@@ -375,7 +375,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                             eventId={this.props.initialEvent?.getId()}
                             highlightedEventId={highlightedEventId}
                             eventScrollIntoView={this.props.initialEventScrollIntoView}
-                            onUserScroll={this.resetJumpToEvent}
+                            onScroll={this.resetJumpToEvent}
                             onPaginationRequest={this.onPaginationRequest}
                         />
                     </div> }

src/components/structures/TimelinePanel.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef, ReactNode, SyntheticEvent } from 'react';
+import React, { createRef, ReactNode } from 'react';
 import ReactDOM from "react-dom";
 import { NotificationCountType, Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
@@ -127,9 +127,6 @@ interface IProps {
     // callback which is called when the panel is scrolled.
     onScroll?(event: Event): void;
 
-    // callback which is called when the user interacts with the room timeline
-    onUserScroll?(event: SyntheticEvent): void;
-
     // callback which is called when the read-up-to mark is updated.
     onReadMarkerUpdated?(): void;
 
@@ -1664,7 +1661,6 @@ class TimelinePanel extends React.Component<IProps, IState> {
                 ourUserId={MatrixClientPeg.get().credentials.userId}
                 stickyBottom={stickyBottom}
                 onScroll={this.onMessageListScroll}
-                onUserScroll={this.props.onUserScroll}
                 onFillRequest={this.onMessageListFillRequest}
                 onUnfillRequest={this.onMessageListUnfillRequest}
                 isTwelveHour={this.context?.showTwelveHourTimestamps ?? this.state.isTwelveHour}

src/components/views/right_panel/TimelineCard.tsx

@@ -146,19 +146,6 @@ export default class TimelineCard extends React.Component<IProps, IState> {
         }
     };
 
-    private onUserScroll = (): void => {
-        if (this.state.initialEventId && this.state.isInitialEventHighlighted) {
-            dis.dispatch<ViewRoomPayload>({
-                action: Action.ViewRoom,
-                room_id: this.props.room.roomId,
-                event_id: this.state.initialEventId,
-                highlighted: false,
-                replyingToEvent: this.state.replyToEvent,
-                metricsTrigger: undefined, // room doesn't change
-            });
-        }
-    };
-
     private onScroll = (): void => {
         const timelinePanel = this.timelinePanel.current;
         if (!timelinePanel) return;
@@ -171,6 +158,17 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                 atEndOfLiveTimeline: false,
             });
         }
+
+        if (this.state.initialEventId && this.state.isInitialEventHighlighted) {
+            dis.dispatch<ViewRoomPayload>({
+                action: Action.ViewRoom,
+                room_id: this.props.room.roomId,
+                event_id: this.state.initialEventId,
+                highlighted: false,
+                replyingToEvent: this.state.replyToEvent,
+                metricsTrigger: undefined, // room doesn't change
+            });
+        }
     };
 
     private onMeasurement = (narrow: boolean): void => {
@@ -263,7 +261,6 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                             resizeNotifier={this.props.resizeNotifier}
                             highlightedEventId={highlightedEventId}
                             onScroll={this.onScroll}
-                            onUserScroll={this.onUserScroll}
                         />
                     </div>