diff --git a/src/components/left/search/ChatResults.tsx b/src/components/left/search/ChatResults.tsx index 88d626950..9cc5cc936 100644 --- a/src/components/left/search/ChatResults.tsx +++ b/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 = ({ openChat, addRecentlyFoundChatId, searchMessagesGlobal, setGlobalSearchChatId, } = getActions(); + // eslint-disable-next-line no-null/no-null + const chatSelectionRef = useRef(null); + + useHorizontalScroll(chatSelectionRef.current, undefined, true); + const lang = useLang(); const [shouldShowMoreLocal, setShouldShowMoreLocal] = useState(false); @@ -206,7 +212,11 @@ const ChatResults: FC = ({ /> )} {Boolean(localResults.length) && ( -
+
{localResults.map((id) => ( = ({ const containerRef = useRef(null); const previousActiveTab = usePrevious(activeTab); - useHorizontalScroll(containerRef.current); + useHorizontalScroll(containerRef.current, undefined, true); // Scroll container to place active tab in the center useEffect(() => { diff --git a/src/hooks/useHorizontalScroll.ts b/src/hooks/useHorizontalScroll.ts index 7fb258d0f..142d8c42a 100644 --- a/src/hooks/useHorizontalScroll.ts +++ b/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;