Fix useHorizontalScroll to accept ref and not element

src/components/left/search/ChatResults.tsx

@@ -70,8 +70,6 @@ const ChatResults: FC<OwnProps & StateProps> = ({
   // eslint-disable-next-line no-null/no-null
   const chatSelectionRef = useRef<HTMLDivElement>(null);
 
-  useHorizontalScroll(chatSelectionRef.current, undefined, true);
-
   const lang = useLang();
 
   const { isMobile } = useAppLayout();
@@ -132,6 +130,8 @@ const ChatResults: FC<OwnProps & StateProps> = ({
     ];
   }, [searchQuery, currentUserId, localContactIds, lang, localChatIds, localUserIds, chatsById]);
 
+  useHorizontalScroll(chatSelectionRef, !localResults.length, true);
+
   const globalResults = useMemo(() => {
     if (!searchQuery || searchQuery.length < MIN_QUERY_LENGTH_FOR_GLOBAL_SEARCH || !globalChatIds || !globalUserIds) {
       return MEMO_EMPTY_ARRAY;

src/components/left/search/RecentContacts.tsx

@@ -58,7 +58,7 @@ const RecentContacts: FC<OwnProps & StateProps> = ({
     });
   }, [loadTopUsers]);
 
-  useHorizontalScroll(topUsersRef.current, !topUserIds);
+  useHorizontalScroll(topUsersRef, !topUserIds);
 
   const handleClick = useCallback((id: string) => {
     openChat({ id, shouldReplaceHistory: true });

src/components/middle/composer/CustomEmojiPicker.tsx

@@ -171,7 +171,10 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
     && allSets.filter((set) => set.stickers?.length).length === 0
   ), [allSets, areAddedLoaded]);
 
-  useHorizontalScroll(headerRef.current);
+  const canRenderContents = useAsyncRendering([], SLIDE_TRANSITION_DURATION);
+  const shouldRenderContents = areAddedLoaded && canRenderContents && !noPopulatedSets;
+
+  useHorizontalScroll(headerRef, !shouldRenderContents);
 
   // Scroll container and header when active set changes
   useEffect(() => {
@@ -199,8 +202,6 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
     onCustomEmojiSelect(emoji);
   }, [onCustomEmojiSelect]);
 
-  const canRenderContents = useAsyncRendering([], SLIDE_TRANSITION_DURATION);
-
   function renderCover(stickerSet: StickerSetOrRecent, index: number) {
     const firstSticker = stickerSet.stickers?.[0];
     const buttonClassName = buildClassName(
@@ -263,7 +264,7 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
 
   const fullClassName = buildClassName('StickerPicker', 'CustomEmojiPicker', className);
 
-  if (!areAddedLoaded || !canRenderContents || noPopulatedSets) {
+  if (!shouldRenderContents) {
     return (
       <div className={fullClassName}>
         {noPopulatedSets ? (

src/components/middle/composer/CustomEmojiTooltip.tsx

@@ -53,7 +53,7 @@ const CustomEmojiTooltip: FC<OwnProps & StateProps> = ({
   const prevStickers = usePrevious(customEmoji, true);
   const displayedStickers = customEmoji || prevStickers;
 
-  useHorizontalScroll(containerRef.current);
+  useHorizontalScroll(containerRef);
 
   const {
     observe: observeIntersection,

src/components/middle/composer/EmojiPicker.tsx

@@ -105,7 +105,10 @@ const EmojiPicker: FC<OwnProps & StateProps> = ({
     setActiveCategoryIndex(intersectingWithIndexes[Math.floor(intersectingWithIndexes.length / 2)].index);
   });
 
-  useHorizontalScroll(headerRef.current, !isMobile);
+  const canRenderContents = useAsyncRendering([], MENU_TRANSITION_DURATION);
+  const shouldRenderContent = emojis && canRenderContents;
+
+  useHorizontalScroll(headerRef, !(isMobile && shouldRenderContent));
 
   // Scroll header when active set updates
   useEffect(() => {
@@ -169,8 +172,6 @@ const EmojiPicker: FC<OwnProps & StateProps> = ({
     onEmojiSelect(emoji, name);
   }, [onEmojiSelect]);
 
-  const canRenderContents = useAsyncRendering([], MENU_TRANSITION_DURATION);
-
   function renderCategoryButton(category: EmojiCategoryData, index: number) {
     const icon = ICONS_BY_CATEGORY[category.id];
 
@@ -191,7 +192,7 @@ const EmojiPicker: FC<OwnProps & StateProps> = ({
 
   const containerClassName = buildClassName('EmojiPicker', className);
 
-  if (!emojis || !canRenderContents) {
+  if (!shouldRenderContent) {
     return (
       <div className={containerClassName}>
         <Loading />

src/components/middle/composer/EmojiTooltip.tsx

@@ -81,7 +81,7 @@ const EmojiTooltip: FC<OwnProps> = ({
     emojis.length ? [...customEmojis, ...emojis] : undefined, CLOSE_DURATION,
   ) || [];
 
-  useHorizontalScroll(containerRef.current);
+  useHorizontalScroll(containerRef);
 
   const handleSelectEmoji = useCallback((emoji: Emoji) => {
     onEmojiSelect(emoji.native);

src/components/middle/composer/StickerPicker.tsx

@@ -214,7 +214,10 @@ const StickerPicker: FC<OwnProps & StateProps> = ({
     sendMessageAction({ type: 'chooseSticker' });
   }, [canSendStickers, loadAndPlay, loadRecentStickers, sendMessageAction]);
 
-  useHorizontalScroll(headerRef.current);
+  const canRenderContents = useAsyncRendering([], SLIDE_TRANSITION_DURATION);
+  const shouldRenderContents = areAddedLoaded && canRenderContents && !noPopulatedSets && canSendStickers;
+
+  useHorizontalScroll(headerRef, !shouldRenderContents);
 
   // Scroll container and header when active set changes
   useEffect(() => {
@@ -260,8 +263,6 @@ const StickerPicker: FC<OwnProps & StateProps> = ({
     removeRecentSticker({ sticker });
   }, [removeRecentSticker]);
 
-  const canRenderContents = useAsyncRendering([], SLIDE_TRANSITION_DURATION);
-
   function renderCover(stickerSet: StickerSetOrRecent, index: number) {
     const firstSticker = stickerSet.stickers?.[0];
     const buttonClassName = buildClassName(
@@ -329,7 +330,7 @@ const StickerPicker: FC<OwnProps & StateProps> = ({
 
   const fullClassName = buildClassName('StickerPicker', className);
 
-  if (!areAddedLoaded || !canRenderContents || noPopulatedSets || !canSendStickers) {
+  if (!shouldRenderContents) {
     return (
       <div className={fullClassName}>
         {!canSendStickers ? (

src/components/middle/message/ReactionSelector.tsx

@@ -45,7 +45,7 @@ const ReactionSelector: FC<OwnProps> = ({
   // eslint-disable-next-line no-null/no-null
   const itemsScrollRef = useRef<HTMLDivElement>(null);
   const [isHorizontalScrollEnabled, enableHorizontalScroll] = useFlag(false);
-  useHorizontalScroll(itemsScrollRef.current, !isHorizontalScrollEnabled);
+  useHorizontalScroll(itemsScrollRef, !isHorizontalScrollEnabled);
 
   useLayoutEffect(() => {
     enableHorizontalScroll();

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, undefined, true);
+  useHorizontalScroll(containerRef, undefined, true);
 
   // Scroll container to place active tab in the center
   useEffect(() => {

src/hooks/useHorizontalScroll.ts

@@ -1,11 +1,17 @@
 import { useEffect } from '../lib/teact/teact';
 
-const useHorizontalScroll = (container: HTMLElement | null, isDisabled?: boolean, shouldPreventDefault = false) => {
+const useHorizontalScroll = (
+  containerRef: React.RefObject<HTMLDivElement>,
+  isDisabled?: boolean,
+  shouldPreventDefault = false,
+) => {
   useEffect(() => {
-    if (!container || isDisabled) {
+    if (isDisabled) {
       return undefined;
     }
 
+    const container = containerRef.current!;
+
     function handleScroll(e: WheelEvent) {
       // Ignore horizontal scroll and let it work natively (e.g. on touchpad)
       if (!e.deltaX) {
@@ -19,7 +25,7 @@ const useHorizontalScroll = (container: HTMLElement | null, isDisabled?: boolean
     return () => {
       container.removeEventListener('wheel', handleScroll);
     };
-  }, [container, isDisabled, shouldPreventDefault]);
+  }, [containerRef, isDisabled, shouldPreventDefault]);
 };
 
 export default useHorizontalScroll;