@visns-studio/visns-components 6.6.0 → 6.6.2

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.6.0",
+    "version": "6.6.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -871,6 +871,25 @@ const DataGrid = forwardRef(
             return initialLimit;
         });
         const [search, setSearch] = useState('');
+
+        // This component instance survives client-side route changes — React Router
+        // reconciles the new page's grid into the same DataGrid element, and only the
+        // inner ReactDataGrid remounts (its key includes the ajax url). Without this
+        // reset the previous page's filters and search ride into the new page's very
+        // first request, including whereHas relations the new page's model may not
+        // have at all, which the backend answers with a 500. It has to happen during
+        // render rather than in an effect: an effect would fire only after the
+        // remounted inner grid has already mounted and issued that first fetch, so
+        // adjusting the state here is what keeps the stale values from ever reaching
+        // it. The equality guards keep this from looping.
+        const prevAjaxUrlRef = useRef(ajaxSetting?.url);
+        if (prevAjaxUrlRef.current !== ajaxSetting?.url) {
+            prevAjaxUrlRef.current = ajaxSetting?.url;
+            if (filterValue.length > 0) setFilterValue([]);
+            if (search !== '') setSearch('');
+            if (dSearch !== '') setDSearch('');
+        }
+
         const [selected, setSelected] = useState({});
         const [inputDebounceTimers] = useState({});
         const [localInputValues, setLocalInputValues] = useState({});
@@ -3566,6 +3585,7 @@ const DataGrid = forwardRef(
         };
 
         useEffect(() => {
+            const requestUrl = ajaxSetting?.url;
             const dropdownFetches = columns
                 .filter((column) =>
                     ['dropdown', 'multiDropdown'].includes(column.type)
@@ -3582,6 +3602,12 @@ const DataGrid = forwardRef(
 
             Promise.all(dropdownFetches)
                 .then((results) => {
+                    // The page changed while these dropdown fetches were in
+                    // flight — these columns/filters belong to the previous page.
+                    if (requestUrl !== prevAjaxUrlRef.current) {
+                        return;
+                    }
+
                     // Merge all resolved objects into a single object
                     const dropdownData = results.reduce((acc, result) => {
                         return { ...acc, ...result };
@@ -4622,6 +4648,7 @@ const DataGrid = forwardRef(
                         newColumns.push({
                             name: 'setting',
                             header: 'Action',
+                            sortable: false,
                             defaultWidth: actionColumnWidth,
                             minWidth: actionColumnWidth,
                             textAlign: 'center',