From dc2b007e7da8b58bf767d074ce08d6404606f4f8 Mon Sep 17 00:00:00 2001
From: ivan-aksamentov <ivan.aksamentov@gmail.com>
Date: Fri, 20 Oct 2023 20:29:49 +0200
Subject: [PATCH] fix(web): scroll dataset list to top when searching

---
 .../src/components/Main/DatasetSelectorList.tsx           | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetSelectorList.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetSelectorList.tsx
index 31f2427dd..ec5fd62d5 100644
--- a/packages_rs/nextclade-web/src/components/Main/DatasetSelectorList.tsx
+++ b/packages_rs/nextclade-web/src/components/Main/DatasetSelectorList.tsx
@@ -1,7 +1,6 @@
 import { get, isNil, sortBy } from 'lodash'
 import { lighten } from 'polished'
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react'
-import { ListGroup } from 'reactstrap'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { ListGenericCss } from 'src/components/Common/List'
 import { DatasetInfo } from 'src/components/Main/DatasetInfo'
@@ -95,6 +94,9 @@ export function DatasetSelectorList({
     }
   }, [autodetectRunState, autodetectResult.itemsInclude, onDatasetHighlighted, setAutodetectRunState])
 
+  const ulRef = useRef<HTMLUListElement>(null)
+  useEffect(() => ulRef.current?.scrollTo({ top: 0, left: 0, behavior: 'smooth' }), [searchTerm])
+
   const listItems = useMemo(() => {
     return (
       <>
@@ -126,7 +128,7 @@ export function DatasetSelectorList({
     )
   }, [datasetHighlighted, itemsInclude, itemsNotInclude, itemsStartWith, onItemClick])
 
-  return <Ul>{listItems}</Ul>
+  return <Ul ref={ulRef}>{listItems}</Ul>
 }
 
 function nodeRefSetOrDelete<T extends HTMLElement>(map: Map<string, T>, key: string) {
@@ -139,7 +141,7 @@ function nodeRefSetOrDelete<T extends HTMLElement>(map: Map<string, T>, key: str
   }
 }
 
-export const Ul = styled(ListGroup)`
+export const Ul = styled.ul`
   ${ListGenericCss};
   flex: 1;
   overflow: auto;