MM-58351 Fix showing LHS scrollbar when moving mouse over on chrome and safari (#27160)

* fixing scrollbar not showing when moving mouse over sidebar

* making scrollbar hidden by default and keep shown when hover over channel list

* updating sidebar_list snapshot

webapp/channels/src/components/sidebar/sidebar_list/__snapshots__/sidebar_list.test.tsx.snap

@@ -37,13 +37,17 @@ exports[`SidebarList should match snapshot 1`] = `
       onClick={[Function]}
       show={false}
     />
+    <div
+      onPointerLeave={[Function]}
+      onPointerOver={[Function]}
+    >
       <Scrollbars
         autoHeight={false}
         autoHeightMax={200}
         autoHeightMin={0}
         autoHide={true}
-      autoHideDuration={500}
-      autoHideTimeout={500}
+        autoHideDuration={200}
+        autoHideTimeout={1000}
         hideTracksWhenNotNeeded={false}
         onScroll={[Function]}
         renderThumbHorizontal={[Function]}
@@ -82,6 +86,7 @@ exports[`SidebarList should match snapshot 1`] = `
         </DragDropContext>
       </Scrollbars>
     </div>
+  </div>
 </Fragment>
 `;
 

webapp/channels/src/components/sidebar/sidebar_list/sidebar_list.tsx

@@ -108,6 +108,7 @@ type Props = {
 type State = {
     showTopUnread: boolean;
     showBottomUnread: boolean;
+    autoHide: boolean;
 };
 
 // scrollMargin is the margin at the edge of the channel list that we leave when scrolling to a channel.
@@ -125,6 +126,7 @@ export default class SidebarList extends React.PureComponent<Props, State> {
     scrollbar: React.RefObject<Scrollbars>;
     animate: SpringSystem;
     scrollAnimation: Spring;
+    channelsListScrollTimeout: NodeJS.Timeout | null = null;
 
     constructor(props: Props) {
         super(props);
@@ -133,6 +135,7 @@ export default class SidebarList extends React.PureComponent<Props, State> {
         this.state = {
             showTopUnread: false,
             showBottomUnread: false,
+            autoHide: true,
         };
         this.scrollbar = React.createRef();
 
@@ -462,6 +465,20 @@ export default class SidebarList extends React.PureComponent<Props, State> {
         this.props.actions.stopDragging();
     };
 
+    showChannelListScrollbar = () => {
+        if (this.channelsListScrollTimeout !== null) {
+            clearTimeout(this.channelsListScrollTimeout);
+        }
+
+        this.setState({autoHide: false});
+    };
+
+    hideChannelListScrollbar = () => {
+        this.channelsListScrollTimeout = setTimeout(() => {
+            this.setState({autoHide: true});
+        }, 300);
+    };
+
     render() {
         const {categories} = this.props;
 
@@ -562,11 +579,13 @@ export default class SidebarList extends React.PureComponent<Props, State> {
                         extraClass='nav-pills__unread-indicator-bottom'
                         content={below}
                     />
+                    <div
+                        onPointerLeave={this.hideChannelListScrollbar}
+                        onPointerOver={this.showChannelListScrollbar}
+                    >
                         <Scrollbars
                             ref={this.scrollbar}
-                        autoHide={true}
-                        autoHideTimeout={500}
-                        autoHideDuration={500}
+                            autoHide={this.state.autoHide}
                             renderThumbHorizontal={renderThumbHorizontal}
                             renderThumbVertical={renderThumbVertical}
                             renderTrackVertical={renderTrackVertical}
@@ -577,6 +596,7 @@ export default class SidebarList extends React.PureComponent<Props, State> {
                             {channelList}
                         </Scrollbars>
                     </div>
+                </div>
             </>
         );
     }