From 9f23a3eb6e596fc98743640ec19b07fd5e057ec7 Mon Sep 17 00:00:00 2001
From: Lixian Zhou <charlie32690@gmail.com>
Date: Tue, 17 Mar 2026 14:35:36 -0400
Subject: [PATCH] fix

---
 client/src/shared/components/Export.js      | 12 ++++++++++--
 client/src/shared/components/ManageTable.js | 12 ++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/client/src/shared/components/Export.js b/client/src/shared/components/Export.js
index 0985595..d4ff4d6 100644
--- a/client/src/shared/components/Export.js
+++ b/client/src/shared/components/Export.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Dropdown } from "react-bootstrap";
 import { Download } from "react-bootstrap-icons";
 
@@ -7,16 +7,24 @@ const Export = ({ columns, data, filename = "export", customActions = [], show,
   const [exportColumns, setExportColumns] = useState(
     columns.map(col => ({ ...col, show: true }))
   );
+  const scrollContainerRef = useRef(null);
+  const scrollTopRef = useRef(0);
 
   // Use external control if provided, otherwise use internal state
   const showExportDropdown = show !== undefined ? show : internalShow;
   const handleToggle = onToggle || ((isOpen) => setInternalShow(isOpen));
 
   const handleColumnToggle = (columnKey) => {
+    scrollTopRef.current = scrollContainerRef.current?.scrollTop || 0;
     const updatedColumns = exportColumns.map(col => 
       col.key === columnKey ? { ...col, show: !col.show } : col
     );
     setExportColumns(updatedColumns);
+    requestAnimationFrame(() => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollTop = scrollTopRef.current;
+      }
+    });
   };
 
   const handleCancel = () => {
@@ -136,7 +144,7 @@ const Export = ({ columns, data, filename = "export", customActions = [], show,
                     <hr style={{ margin: '8px 0', borderColor: '#ddd' }} />
                   </>
                 )}
-              <div style={{ maxHeight: '200px', overflowY: 'auto', marginBottom: '15px' }}>
+              <div style={{ maxHeight: '200px', overflowY: 'auto', marginBottom: '15px' }} ref={scrollContainerRef}>
                 <h6 style={{ fontSize: '14px', marginBottom: '10px' }}>Select Columns:</h6>
                 {exportColumns.map((column) => (
                   <div key={column.key} style={{ marginBottom: '8px' }}>
diff --git a/client/src/shared/components/ManageTable.js b/client/src/shared/components/ManageTable.js
index 53a99e0..b5c3c0b 100644
--- a/client/src/shared/components/ManageTable.js
+++ b/client/src/shared/components/ManageTable.js
@@ -1,10 +1,12 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Dropdown } from "react-bootstrap";
 import { Columns } from "react-bootstrap-icons";
 
 const ManageTable = ({ columns, onColumnsChange, show, onToggle }) => {
   const [internalShow, setInternalShow] = useState(false);
   const [tempColumns, setTempColumns] = useState(columns);
+  const scrollContainerRef = useRef(null);
+  const scrollTopRef = useRef(0);
   
   // Use external control if provided, otherwise use internal state
   const showManageTableDropdown = show !== undefined ? show : internalShow;
@@ -15,10 +17,16 @@ const ManageTable = ({ columns, onColumnsChange, show, onToggle }) => {
   }, [columns]);
 
   const handleColumnToggle = (columnKey) => {
+    scrollTopRef.current = scrollContainerRef.current?.scrollTop || 0;
     const updatedColumns = tempColumns.map(col => 
       col.key === columnKey ? { ...col, show: !col.show } : col
     );
     setTempColumns(updatedColumns);
+    requestAnimationFrame(() => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollTop = scrollTopRef.current;
+      }
+    });
   };
 
   const handleDone = () => {
@@ -51,7 +59,7 @@ const ManageTable = ({ columns, onColumnsChange, show, onToggle }) => {
           <h6>Manage Table Columns</h6>
           <div className="app-main-content-fields-section margin-sm dropdown-container">
             <div className="manage-table-columns-wrapper">
-              <div className="manage-table-columns-scroll">
+              <div className="manage-table-columns-scroll" ref={scrollContainerRef}>
                 {tempColumns.map((column) => (
                   <div key={column.key} style={{ marginBottom: '8px' }}>
                     <input