reset highlighted event on room timeline scroll

src/components/structures/MessagePanel.js

@@ -120,6 +120,9 @@ export default class MessagePanel extends React.Component {
         // callback which is called when the panel is scrolled.
         onScroll: PropTypes.func,
 
+        // callback which is called when the user interacts with the room timeline
+        onUserScroll: PropTypes.func,
+
         // callback which is called when more content is needed.
         onFillRequest: PropTypes.func,
 
@@ -869,6 +872,7 @@ export default class MessagePanel extends React.Component {
                     ref={this._scrollPanel}
                     className={className}
                     onScroll={this.props.onScroll}
+                    onUserScroll={this.props.onUserScroll}
                     onResize={this.onResize}
                     onFillRequest={this.props.onFillRequest}
                     onUnfillRequest={this.props.onUnfillRequest}

src/components/structures/RoomView.tsx

@@ -637,6 +637,17 @@ export default class RoomView extends React.Component<IProps, IState> {
         SettingsStore.unwatchSetting(this.layoutWatcherRef);
     }
 
+    private onUserScroll = () => {
+        if (this.state.initialEventId && this.state.isInitialEventHighlighted) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: this.state.room.roomId,
+                event_id: this.state.initialEventId,
+                highlighted: false,
+            });
+        }
+    }
+
     private onLayoutChange = () => {
         this.setState({
             layout: SettingsStore.getValue("layout"),
@@ -2011,6 +2022,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 eventId={this.state.initialEventId}
                 eventPixelOffset={this.state.initialEventPixelOffset}
                 onScroll={this.onMessageListScroll}
+                onUserScroll={this.onUserScroll}
                 onReadMarkerUpdated={this.updateTopUnreadMessagesBar}
                 showUrlPreview = {this.state.showUrlPreview}
                 className={messagePanelClassNames}

src/components/structures/ScrollPanel.js

@@ -133,6 +133,10 @@ export default class ScrollPanel extends React.Component {
          */
         onScroll: PropTypes.func,
 
+        /* onUserScroll: callback which is called when the user interacts with the room timeline
+         */
+        onUserScroll: PropTypes.func,
+
         /* className: classnames to add to the top-level div
          */
         className: PropTypes.string,
@@ -535,31 +539,39 @@ export default class ScrollPanel extends React.Component {
      * @param {object} ev the keyboard event
      */
     handleScrollKey = ev => {
+        let isScrolling = false;
         switch (ev.key) {
             case Key.PAGE_UP:
                 if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
+                    isScrolling = true;
                     this.scrollRelative(-1);
                 }
                 break;
 
             case Key.PAGE_DOWN:
                 if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
+                    isScrolling = true;
                     this.scrollRelative(1);
                 }
                 break;
 
             case Key.HOME:
                 if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
+                    isScrolling = true;
                     this.scrollToTop();
                 }
                 break;
 
             case Key.END:
                 if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
+                    isScrolling = true;
                     this.scrollToBottom();
                 }
                 break;
         }
+        if (isScrolling && this.props.onUserScroll) {
+            this.props.onUserScroll(ev);
+        }
     };
 
     /* Scroll the panel to bring the DOM node with the scroll token
@@ -896,6 +908,7 @@ export default class ScrollPanel extends React.Component {
         // list-style-type: none; is no longer a list
         return (<AutoHideScrollbar wrappedRef={this._collectScroll}
                 onScroll={this.onScroll}
+                onWheel={this.props.onUserScroll}
                 className={`mx_ScrollPanel ${this.props.className}`} style={this.props.style}>
                     { this.props.fixedChildren }
                     <div className="mx_RoomView_messageListWrapper">

src/components/structures/TimelinePanel.js

@@ -92,6 +92,9 @@ class TimelinePanel extends React.Component {
         // callback which is called when the panel is scrolled.
         onScroll: PropTypes.func,
 
+        // callback which is called when the user interacts with the room timeline
+        onUserScroll: PropTypes.func,
+
         // callback which is called when the read-up-to mark is updated.
         onReadMarkerUpdated: PropTypes.func,
 
@@ -255,7 +258,9 @@ class TimelinePanel extends React.Component {
             console.warn("Replacing timelineSet on a TimelinePanel - confusion may ensue");
         }
 
-        if (newProps.eventId != this.props.eventId) {
+        const differentEventId = newProps.eventId != this.props.eventId;
+        const differentHighlightedEventId = newProps.highlightedEventId != this.props.highlightedEventId;
+        if (differentEventId || differentHighlightedEventId) {
             console.log("TimelinePanel switching to eventId " + newProps.eventId +
                         " (was " + this.props.eventId + ")");
             return this._initTimeline(newProps);
@@ -1438,6 +1443,7 @@ class TimelinePanel extends React.Component {
                 ourUserId={MatrixClientPeg.get().credentials.userId}
                 stickyBottom={stickyBottom}
                 onScroll={this.onMessageListScroll}
+                onUserScroll={this.props.onUserScroll}
                 onFillRequest={this.onMessageListFillRequest}
                 onUnfillRequest={this.onMessageListUnfillRequest}
                 isTwelveHour={this.state.isTwelveHour}