Profile: Fix scroll on opening (#4877)

src/components/right/Profile.tsx

@@ -63,6 +63,7 @@ import { getSenderName } from '../left/search/helpers/getSenderName';
 import usePeerStoriesPolling from '../../hooks/polling/usePeerStoriesPolling';
 import useCacheBuster from '../../hooks/useCacheBuster';
 import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps';
+import useFlag from '../../hooks/useFlag';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
@@ -256,6 +257,8 @@ const Profile: FC<OwnProps & StateProps> = ({
     return index === -1 ? 0 : index;
   }, [nextProfileTab, tabs]);
 
+  const [allowAutoScrollToTabs, startAutoScrollToTabsIfNeeded, stopAutoScrollToTabs] = useFlag(false);
+
   const [activeTab, setActiveTab] = useState(initialTab);
 
   useEffect(() => {
@@ -266,6 +269,11 @@ const Profile: FC<OwnProps & StateProps> = ({
     setActiveTab(index);
   }, [nextProfileTab, tabs]);
 
+  const handleSwitchTab = useCallback((index: number) => {
+    startAutoScrollToTabsIfNeeded();
+    setActiveTab(index);
+  }, []);
+
   useEffect(() => {
     if (isChannel && !similarChannels) {
       loadChannelRecommendations({ chatId });
@@ -310,12 +318,18 @@ const Profile: FC<OwnProps & StateProps> = ({
 
   usePeerStoriesPolling(resultType === 'members' ? viewportIds as string[] : undefined);
 
+  const handleStopAutoScrollToTabs = useLastCallback(() => {
+    stopAutoScrollToTabs();
+  });
+
   const { handleScroll } = useProfileState(
     containerRef,
     resultType,
     profileState,
     onProfileStateChange,
     forceScrollProfileTab,
+    allowAutoScrollToTabs,
+    handleStopAutoScrollToTabs,
   );
 
   const { applyTransitionFix, releaseTransitionFix } = useTransitionFixes(containerRef);
@@ -649,7 +663,7 @@ const Profile: FC<OwnProps & StateProps> = ({
           >
             {renderContent()}
           </Transition>
-          <TabList big activeTab={renderingActiveTab} tabs={tabs} onSwitchTab={setActiveTab} />
+          <TabList big activeTab={renderingActiveTab} tabs={tabs} onSwitchTab={handleSwitchTab} />
         </div>
       )}
 

src/components/right/hooks/useProfileState.ts

@@ -21,12 +21,15 @@ export default function useProfileState(
   profileState: ProfileState,
   onProfileStateChange: (state: ProfileState) => void,
   forceScrollProfileTab = false,
+  allowAutoScrollToTabs = false,
+  handleStopAutoScrollToTabs: () => void,
 ) {
   // Scroll to tabs if needed
   useEffectWithPrevDeps(([prevTabType]) => {
-    if ((prevTabType && prevTabType !== tabType) || (tabType && forceScrollProfileTab)) {
+    if ((prevTabType && prevTabType !== tabType && allowAutoScrollToTabs) || (tabType && forceScrollProfileTab)) {
       const container = containerRef.current!;
       const tabsEl = container.querySelector<HTMLDivElement>('.TabList')!;
+      handleStopAutoScrollToTabs();
       if (container.scrollTop < tabsEl.offsetTop) {
         onProfileStateChange(getStateFromTabType(tabType));
         isScrollingProgrammatically = true;
@@ -36,7 +39,8 @@ export default function useProfileState(
         }, PROGRAMMATIC_SCROLL_TIMEOUT_MS);
       }
     }
-  }, [tabType, onProfileStateChange, containerRef, forceScrollProfileTab]);
+  }, [tabType, onProfileStateChange, containerRef, forceScrollProfileTab,
+    allowAutoScrollToTabs, handleStopAutoScrollToTabs]);
 
   // Scroll to top
   useEffectWithPrevDeps(([prevProfileState]) => {