From dabbd23cf5551b952d0b3ed33fc36050001ce2b4 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 7 May 2026 14:39:14 +0300
Subject: [PATCH] fix: scroll to start of the list when selecting

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 05ed63677..e2353c221 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react';
+import React, { useMemo, useCallback, useState, useRef, forwardRef, memo } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import { useCore } from 'stremio/core';
@@ -22,6 +22,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
     const core = useCore();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
     const [selectedVideoId, setSelectedVideoId] = useState<string | null>(null);
+    const videosRef = useRef<HTMLDivElement>(null);
 
     const metaItem = useMemo(() => {
         return seriesInfo ?
@@ -47,8 +48,9 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
             .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
     }, [props.metaItem.videos]);
 
-    const seasonOnSelect = useCallback((event: { value: string }) => {
-        setSeason(parseInt(event.value));
+    const seasonOnSelect = useCallback((event: { value: string | number }) => {
+        setSeason(parseInt(String(event.value), 10));
+        videosRef.current?.scrollTo({ top: 0, left: 0 });
     }, []);
 
     const seasonWatched = React.useMemo(() => {
@@ -109,7 +111,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                             seasons={seasons}
                             onSelect={seasonOnSelect}
                         />
-                        <div className={styles['videos']}>
+                        <div ref={videosRef} className={styles['videos']}>
                             {videos.map((video, index) => (
                                 <Video
                                     key={index}