fix: fix stale filter bar after view selection by comparing values too - FIXES #14159

.changeset/jolly-times-punch.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/ui": patch
+"@medusajs/dashboard": patch
+---
+
+Fixed the stale filters when selecting a view (VIEW_CONFIUGRATIONS_FF)

packages/design-system/ui/package.json

@@ -57,6 +57,7 @@
     "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.3",
     "cva": "1.0.0-beta.1",
+    "lodash.isequal": "^4.5.0",
     "prism-react-renderer": "^2.0.6",
     "prismjs": "^1.30.0",
     "radix-ui": "1.1.2",

packages/design-system/ui/src/blocks/data-table/components/data-table-filter-bar.tsx

@@ -7,8 +7,8 @@ import { DataTableFilterMenu } from "@/blocks/data-table/components/data-table-f
 import { DataTableSortingMenu } from "@/blocks/data-table/components/data-table-sorting-menu"
 import { DataTableColumnVisibilityMenu } from "@/blocks/data-table/components/data-table-column-visibility-menu"
 import { useDataTableContext } from "@/blocks/data-table/context/use-data-table-context"
-import { Button } from "@/components/button"
 import { Skeleton } from "@/components/skeleton"
+import isEqual from "lodash.isequal"
 
 interface DataTableFilterBarProps {
   clearAllFiltersLabel?: string
@@ -41,32 +41,57 @@ const DataTableFilterBar = ({
 
   // Sync parent filters with local state
   React.useEffect(() => {
-    setLocalFilters(prevLocalFilters => {
+    setLocalFilters((prevLocalFilters) => {
       const parentIds = Object.keys(parentFilterState)
-      const localIds = prevLocalFilters.map(f => f.id)
-
-      // Remove local filters that have been removed from parent
-      const updatedLocalFilters = prevLocalFilters.filter(f => 
-        parentIds.includes(f.id) || f.isNew
-      )
-
+      const localIds = prevLocalFilters.map((f) => f.id)
+
+      // Start with filters that exist in parent or are new (user-added)
+      const updatedLocalFilters: LocalFilter[] = prevLocalFilters
+        .filter((f) => parentIds.includes(f.id) || f.isNew)
+        .map((f) => {
+          // If filter exists in parent, update its value from parent
+          if (parentIds.includes(f.id)) {
+            const parentValue = parentFilterState[f.id]
+            // Only update if value actually changed
+            if (!isEqual(f.value, parentValue)) {
+              return {
+                id: f.id,
+                value: parentValue,
+                isNew: false,
+              }
+            }
+          }
+          return f
+        })
+
       // Add parent filters that don't exist locally
-      parentIds.forEach(id => {
+      parentIds.forEach((id) => {
         if (!localIds.includes(id)) {
           updatedLocalFilters.push({
             id,
             value: parentFilterState[id],
-            isNew: false
+            isNew: false,
           })
         }
       })
-
-      // Only update if there's an actual change
-      if (updatedLocalFilters.length !== prevLocalFilters.length ||
-          updatedLocalFilters.some((f, i) => f.id !== prevLocalFilters[i]?.id)) {
+
+      // Check if there's an actual change (length, IDs, or values)
+      if (updatedLocalFilters.length !== prevLocalFilters.length) {
         return updatedLocalFilters
       }
-      return prevLocalFilters
+
+      // Check if any filter ID changed position or if any value changed
+      const hasChanges = updatedLocalFilters.some((f, i) => {
+        const prev = prevLocalFilters[i]
+        return (
+          !prev ||
+          f.id !== prev.id ||
+          !isEqual(f.value, prev.value) ||
+          f.isNew !== prev.isNew
+        )
+      })
+
+      return hasChanges ? updatedLocalFilters : prevLocalFilters
     })
   }, [parentFilterState])
 

yarn.lock

@@ -4131,6 +4131,7 @@ __metadata:
     clsx: ^1.2.1
     copy-to-clipboard: ^3.3.3
     cva: 1.0.0-beta.1
+    lodash.isequal: ^4.5.0
     prism-react-renderer: ^2.0.6
     prismjs: ^1.30.0
     radix-ui: 1.1.2