Merge pull request #870 from objectstack-ai/copilot/fix-grouping-functionality

Author: hotlong

ROADMAP.md

@@ -1021,6 +1021,18 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 
 ---
 
+## 🐛 Bug Fixes
+
+### ListView Grouping Config Not Taking Effect (February 2026)
+
+**Root Cause:** `viewComponentSchema` `useMemo` in `ListView.tsx` was missing `groupingConfig`, `rowColorConfig`, and `navigation.handleClick` in its dependency array. When users toggled grouping fields via the toolbar popover, the state changed but the memoized schema was not recomputed, so the child grid/kanban/gallery never received the updated grouping config.
+
+**Fix:** Added `groupingConfig`, `rowColorConfig`, and `navigation.handleClick` to the `useMemo` dependency array at line 856 of `ListView.tsx`.
+
+**Tests:** Added integration test in `ListViewGroupingPropagation.test.tsx` that verifies toggling a group field via the toolbar immediately updates the rendered schema. All 117 ListView tests pass.
+
+---
+
 ## ⚠️ Risk Management
 
 | Risk | Mitigation |

packages/plugin-list/src/ListView.tsx

@@ -853,7 +853,7 @@ export const ListView: React.FC<ListViewProps> = ({
       default:
         return baseProps;
     }
-  }, [currentView, schema, currentSort, effectiveFields]);
+  }, [currentView, schema, currentSort, effectiveFields, groupingConfig, rowColorConfig, navigation.handleClick]);
 
   const hasFilters = currentFilters.conditions && currentFilters.conditions.length > 0;
 

packages/plugin-list/src/__tests__/ListViewGroupingPropagation.test.tsx

@@ -184,6 +184,52 @@ describe('ListView grouping config propagation', () => {
     expect(capturedSchema.grouping).toEqual(groupingConfig);
   });
 
+  it('updates grid schema when user toggles grouping via toolbar', async () => {
+    render(
+      <ListView
+        schema={{
+          type: 'list-view',
+          objectName: 'products',
+          viewType: 'grid',
+          fields: ['name', 'category'],
+          data: testData,
+        }}
+      />,
+    );
+
+    // Initially no grouping
+    expect(capturedSchema).toBeDefined();
+    expect(capturedSchema.type).toBe('object-grid');
+    expect(capturedSchema.grouping).toBeUndefined();
+
+    // Open Group popover
+    const groupButton = screen.getByRole('button', { name: /group/i });
+    fireEvent.click(groupButton);
+
+    // Select the 'category' field checkbox in the group field list
+    const fieldList = screen.getByTestId('group-field-list');
+    const checkboxes = fieldList.querySelectorAll('input[type="checkbox"]');
+    // Find the checkbox for 'category'
+    const categoryCheckbox = Array.from(checkboxes).find(cb => {
+      const label = cb.closest('label');
+      return label?.textContent?.includes('category');
+    });
+    expect(categoryCheckbox).toBeDefined();
+    fireEvent.click(categoryCheckbox!);
+
+    // Schema should now include grouping config
+    expect(capturedSchema.grouping).toBeDefined();
+    expect(capturedSchema.grouping.fields).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ field: 'category' }),
+      ]),
+    );
+
+    // Toggle off — click the checkbox again
+    fireEvent.click(categoryCheckbox!);
+    expect(capturedSchema.grouping).toBeUndefined();
+  });
+
   it('does not pass grouping when no grouping config exists', () => {
     render(
       <ListView