fix with query dependencies

TeselaGen · Sep 12, 2024 · 7a67afd · 7a67afd
1 parent 1ec4f6b
commit 7a67afd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.5.23-beta.13",
+  "version": "0.5.23-beta.14",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

diff --git a/packages/ui/src/DataTable/ColumnFilterMenu.js b/packages/ui/src/DataTable/ColumnFilterMenu.js
@@ -38,17 +38,19 @@ export const ColumnFilterMenu = ({
           removeSingleFilter={removeSingleFilter}
           schemaForField={schemaForField}
           setNewParams={setNewParams}
-          togglePopover={() => {
-            setColumnFilterMenuOpen(false);
-          }}
+          togglePopover={() => setColumnFilterMenuOpen(false)}
         />
       }
     >
       <Icon
         style={{ marginLeft: 5 }}
         icon="filter"
         size={extraCompact ? 14 : undefined}
-        onClick={() => setColumnFilterMenuOpen(prev => !prev)}
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          setColumnFilterMenuOpen(prev => !prev);
+        }}
         className={classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn
         })}

diff --git a/packages/ui/src/DataTable/index.js b/packages/ui/src/DataTable/index.js
@@ -102,6 +102,7 @@ import {
 import { RenderColumns } from "./Columns";
 import { formValueSelector } from "redux-form";
 import { throwFormError } from "../throwFormError";
+import { useTraceUpdate } from "../utils/useTraceUpdate";
 
 enablePatches();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
@@ -378,6 +379,8 @@ const DataTable = ({
     urlConnected
   ]);
 
+  useTraceUpdate({ ...queryParams });
+
   props = {
     ...props,
     ...queryParams
@@ -644,8 +647,8 @@ const DataTable = ({
       }
     }
     return schema;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    cellRenderer,
     convertedSchema,
     currentParams,
     entities,
@@ -655,7 +658,7 @@ const DataTable = ({
     isSimple,
     isViewable,
     onDoubleClick,
-    setNewParams,
+    // setNewParams,
     showForcedHiddenColumns,
     tableConfig.columnOrderings,
     tableConfig.fieldOptions,
@@ -1662,7 +1665,8 @@ const DataTable = ({
 
   useEffect(() => {
     addFilters(additionalFilters);
-  }, [addFilters, additionalFilters]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [additionalFilters]);
 
   useEffect(() => {
     setColumns(
@@ -1816,12 +1820,12 @@ const DataTable = ({
     });
   };
 
-  const refocusTable = () => {
+  const refocusTable = useCallback(() => {
     const table = tableRef.current?.tableRef?.closest(
       ".data-table-container>div"
     );
     table?.focus();
-  };
+  }, []);
 
   const isSelectionARectangle = useCallback(() => {
     if (selectedCells && Object.keys(selectedCells).length > 1) {
@@ -2023,6 +2027,7 @@ const DataTable = ({
       formatAndValidateEntities,
       primarySelectedCellId,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -2210,6 +2215,7 @@ const DataTable = ({
       isCellEditable,
       isCopyable,
       reduxFormCellValidation,
+      refocusTable,
       updateEntitiesHelper,
       updateValidation
     ]
@@ -2741,8 +2747,6 @@ const DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       SubComponent,
-      addFilters,
-      cellRenderer,
       columns,
       compact,
       currentParams,
@@ -2775,7 +2779,6 @@ const DataTable = ({
       removeSingleFilter,
       schema,
       selectedCells,
-      setNewParams,
       setOrder,
       shouldShowSubComponent,
       startCellEdit,