Fix horizontal scroll for Windows (#1995)

src/components/left/search/ChatResults.tsx

@@ -1,6 +1,6 @@
 import type { FC } from '../../../lib/teact/teact';
 import React, {
-  memo, useCallback, useMemo, useState,
+  memo, useCallback, useMemo, useRef, useState,
 } from '../../../lib/teact/teact';
 import { getActions, getGlobal, withGlobal } from '../../../global';
 
@@ -17,6 +17,7 @@ import { MEMO_EMPTY_ARRAY } from '../../../util/memo';
 import { throttle } from '../../../util/schedulers';
 import useLang from '../../../hooks/useLang';
 import { renderMessageSummary } from '../../common/helpers/renderMessageText';
+import useHorizontalScroll from '../../../hooks/useHorizontalScroll';
 
 import InfiniteScroll from '../../ui/InfiniteScroll';
 import LeftSearchResultChat from './LeftSearchResultChat';
@@ -64,6 +65,11 @@ const ChatResults: FC<OwnProps & StateProps> = ({
     openChat, addRecentlyFoundChatId, searchMessagesGlobal, setGlobalSearchChatId,
   } = getActions();
 
+  // eslint-disable-next-line no-null/no-null
+  const chatSelectionRef = useRef<HTMLDivElement>(null);
+
+  useHorizontalScroll(chatSelectionRef.current, undefined, true);
+
   const lang = useLang();
 
   const [shouldShowMoreLocal, setShouldShowMoreLocal] = useState<boolean>(false);
@@ -206,7 +212,11 @@ const ChatResults: FC<OwnProps & StateProps> = ({
         />
       )}
       {Boolean(localResults.length) && (
-        <div className="chat-selection no-selection no-scrollbar" dir={lang.isRtl ? 'rtl' : undefined}>
+        <div
+          className="chat-selection no-selection no-scrollbar"
+          dir={lang.isRtl ? 'rtl' : undefined}
+          ref={chatSelectionRef}
+        >
           {localResults.map((id) => (
             <PickerSelectedItem
               chatOrUserId={id}

src/components/ui/TabList.tsx

@@ -40,7 +40,7 @@ const TabList: FC<OwnProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const previousActiveTab = usePrevious(activeTab);
 
-  useHorizontalScroll(containerRef.current);
+  useHorizontalScroll(containerRef.current, undefined, true);
 
   // Scroll container to place active tab in the center
   useEffect(() => {

src/hooks/useHorizontalScroll.ts

@@ -1,6 +1,6 @@
 import { useEffect } from '../lib/teact/teact';
 
-const useHorizontalScroll = (container: HTMLElement | null, isDisabled?: boolean) => {
+const useHorizontalScroll = (container: HTMLElement | null, isDisabled?: boolean, shouldPreventDefault = false) => {
   useEffect(() => {
     if (!container || isDisabled) {
       return undefined;
@@ -10,15 +10,16 @@ const useHorizontalScroll = (container: HTMLElement | null, isDisabled?: boolean
       // Ignore horizontal scroll and let it work natively (e.g. on touchpad)
       if (!e.deltaX) {
         container!.scrollLeft += e.deltaY / 4;
+        if (shouldPreventDefault) e.preventDefault();
       }
     }
 
-    container.addEventListener('wheel', handleScroll, { passive: true });
+    container.addEventListener('wheel', handleScroll, { passive: !shouldPreventDefault });
 
     return () => {
       container.removeEventListener('wheel', handleScroll);
     };
-  }, [container, isDisabled]);
+  }, [container, isDisabled, shouldPreventDefault]);
 };
 
 export default useHorizontalScroll;