fix(case manager): fix scroll while changing pagination & filter select

packages/app-builder/src/components/Cases/CasesList.tsx

@@ -139,7 +139,7 @@ export function CasesList({
     [language, t, orgTags],
   );
 
-  const { table, getBodyProps, rows, getContainerProps } = useVirtualTable({
+  const { table, getBodyProps, rows, getContainerProps, scrollToTop } = useVirtualTable({
     data: cases,
     columns,
     columnResizeMode: 'onChange',
@@ -151,6 +151,10 @@ export function CasesList({
     rowLink: ({ id }) => <Link to={getRoute('/cases/:caseId', { caseId: fromUUIDtoSUUID(id) })} />,
   });
 
+  useEffect(() => {
+    scrollToTop();
+  }, [cases]);
+
   return (
     <Table.Container {...getContainerProps()} className={clsx('bg-grey-100', className)}>
       <Table.Header headerGroups={table.getHeaderGroups()} />

packages/app-builder/src/components/Cases/Filters/CasesFiltersBar.tsx

@@ -7,7 +7,7 @@ import {
 } from '@app-builder/components/Filters';
 import { SimpleFilter } from '@app-builder/components/Filters/SimpleFilter';
 import { useLocation } from '@remix-run/react';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Separator } from 'ui-design-system';
 import { Icon } from 'ui-icons';
@@ -25,9 +25,11 @@ import { casesSimpleFilterNames, getFilterIcon, getFilterTKey } from './filters'
 export function CasesFiltersBar({ excludedFilters }: { excludedFilters?: readonly string[] }) {
   const { t } = useTranslation(casesI18n);
   const { onCasesFilterClose } = useCasesFiltersContext();
+  const [open, setOpen] = useState(false);
   const onOpenChange = useCallback(
-    (open: boolean) => {
-      if (!open) {
+    (state: boolean) => {
+      setOpen(state);
+      if (!state) {
         onCasesFilterClose();
       }
     },
@@ -66,7 +68,7 @@ export function CasesFiltersBar({ excludedFilters }: { excludedFilters?: readonl
                 />
               </SimpleFilter>
             ) : (
-              <FilterPopover.Root key={filterName} onOpenChange={onOpenChange}>
+              <FilterPopover.Root key={filterName} onOpenChange={onOpenChange} open={open}>
                 <FilterItem.Root>
                   <FilterItem.Trigger>
                     <Icon icon={icon} className="size-5" />
@@ -79,7 +81,7 @@ export function CasesFiltersBar({ excludedFilters }: { excludedFilters?: readonl
                   />
                 </FilterItem.Root>
                 <FilterPopover.Content>
-                  <FilterDetail filterName={filterName} />
+                  <FilterDetail filterName={filterName} close={() => setOpen(false)} />
                 </FilterPopover.Content>
               </FilterPopover.Root>
             );

packages/app-builder/src/components/Cases/Filters/CasesFiltersMenu.tsx

@@ -16,21 +16,23 @@ export function CasesFiltersMenu({
   filterNames: readonly CasesFilterName[];
 }) {
   const { onCasesFilterClose } = useCasesFiltersContext();
+  const [open, setOpen] = useState(false);
 
   const onOpenChange = useCallback(
-    (open: boolean) => {
-      if (!open) {
+    (state: boolean) => {
+      setOpen(state);
+      if (!state) {
         onCasesFilterClose();
       }
     },
     [onCasesFilterClose],
   );
 
   return (
-    <FiltersDropdownMenu.Root onOpenChange={onOpenChange}>
+    <FiltersDropdownMenu.Root onOpenChange={onOpenChange} open={open}>
       <FiltersDropdownMenu.Trigger asChild>{children}</FiltersDropdownMenu.Trigger>
       <FiltersDropdownMenu.Content>
-        <FilterContent filterNames={filterNames} />
+        <FilterContent filterNames={filterNames} close={() => setOpen(false)} />
       </FiltersDropdownMenu.Content>
     </FiltersDropdownMenu.Root>
   );
@@ -55,11 +57,17 @@ const FiltersMenuItem = forwardRef<
 });
 FiltersMenuItem.displayName = 'FiltersMenuItem';
 
-function FilterContent({ filterNames }: { filterNames: readonly CasesFilterName[] }) {
+function FilterContent({
+  filterNames,
+  close,
+}: {
+  filterNames: readonly CasesFilterName[];
+  close: () => void;
+}) {
   const [selectedFilter, setSelectedFilter] = useState<CasesFilterName>();
 
   if (selectedFilter) {
-    return <FilterDetail filterName={selectedFilter} />;
+    return <FilterDetail filterName={selectedFilter} close={close} />;
   }
 
   return (

packages/app-builder/src/components/Cases/Filters/FilterDetail/CasesAssigneeFilter.tsx

@@ -4,14 +4,15 @@ import * as R from 'remeda';
 import { Avatar } from 'ui-design-system';
 import { CasesFiltersForm, useCasesFiltersContext } from '../CasesFiltersContext';
 
-export function CasesAssigneeFilter() {
+export function CasesAssigneeFilter({ close }: { close: () => void }) {
   const { submitCasesFilters } = useCasesFiltersContext();
   const { setValue } = useFormContext<CasesFiltersForm>();
   const { orgUsers } = useOrganizationUsers();
 
   const handleUserSelect = (userId: string) => {
     setValue('assignee', userId);
     submitCasesFilters();
+    close();
   };
 
   return (

packages/app-builder/src/components/Cases/Filters/FilterDetail/CasesExcludeAssignedFilter.tsx

@@ -4,13 +4,14 @@ import { useFormContext } from 'react-hook-form';
 
 import { type CasesFiltersForm, useCasesFiltersContext } from '../CasesFiltersContext';
 
-export function CasesExcludeAssignedFilter() {
+export function CasesExcludeAssignedFilter({ close }: { close: () => void }) {
   const { submitCasesFilters } = useCasesFiltersContext();
   const { setValue } = useFormContext<CasesFiltersForm>();
 
   useMemo(() => {
     setValue('excludeAssigned', true);
     submitCasesFilters();
+    close();
   }, []);
   return null;
 }

packages/app-builder/src/components/Cases/Filters/FilterDetail/CasesSnoozedFilter.tsx

@@ -4,13 +4,15 @@ import { useFormContext } from 'react-hook-form';
 
 import { type CasesFiltersForm, useCasesFiltersContext } from '../CasesFiltersContext';
 
-export function CasesSnoozedFilter() {
+export function CasesSnoozedFilter({ close }: { close: () => void }) {
   const { submitCasesFilters } = useCasesFiltersContext();
   const { setValue } = useFormContext<CasesFiltersForm>();
 
   useMemo(() => {
     setValue('includeSnoozed', true);
     submitCasesFilters();
+    close();
   }, []);
+
   return null;
 }

packages/app-builder/src/components/Cases/Filters/FilterDetail/ClosedCasesFilter.tsx

@@ -5,13 +5,14 @@ import { useFormContext } from 'react-hook-form';
 
 import { type CasesFiltersForm, useCasesFiltersContext } from '../CasesFiltersContext';
 
-export function ClosedCasesFilter() {
+export function ClosedCasesFilter({ close }: { close: () => void }) {
   const { submitCasesFilters } = useCasesFiltersContext();
   const { setValue } = useFormContext<CasesFiltersForm>();
 
   useMemo(() => {
     setValue('statuses', ['closed']);
     submitCasesFilters();
+    close();
   }, []);
 
   return null;

packages/app-builder/src/components/Cases/Filters/FilterDetail/FilterDetail.tsx

@@ -7,11 +7,17 @@ import { CasesExcludeAssignedFilter } from './CasesExcludeAssignedFilter';
 import { CasesSnoozedFilter } from './CasesSnoozedFilter';
 import { ClosedCasesFilter } from './ClosedCasesFilter';
 
-export const FilterDetail = ({ filterName }: { filterName: CasesFilterName }) =>
+export const FilterDetail = ({
+  filterName,
+  close,
+}: {
+  filterName: CasesFilterName;
+  close: () => void;
+}) =>
   match(filterName)
     .with('dateRange', () => <CasesDateRangeFilter />)
-    .with('statuses', () => <ClosedCasesFilter />)
-    .with('includeSnoozed', () => <CasesSnoozedFilter />)
-    .with('excludeAssigned', () => <CasesExcludeAssignedFilter />)
-    .with('assignee', () => <CasesAssigneeFilter />)
+    .with('statuses', () => <ClosedCasesFilter close={close} />)
+    .with('includeSnoozed', () => <CasesSnoozedFilter close={close} />)
+    .with('excludeAssigned', () => <CasesExcludeAssignedFilter close={close} />)
+    .with('assignee', () => <CasesAssigneeFilter close={close} />)
     .exhaustive();

packages/ui-design-system/src/Table/Table.tsx

@@ -186,6 +186,9 @@ export function useVirtualTable<TData extends RowData>(options: TableProps<TData
         // Safe to cast as virtualRows is built from rows
         rows[virtualRow.index] as Row<TData>,
     ),
+    scrollToTop: () => {
+      rowVirtualizer.scrollToIndex(0);
+    },
   };
 }