QuickFilterDropdown throws errors when switching between demo tabs

[ryanrozich]

Description

When switching between Client-Side and Server-Side demo tabs, the QuickFilterDropdown component throws errors trying to access undefined filter properties.

Error

[QuickFilterDropdown] Error getting active filters: TypeError: Cannot read properties of undefined (reading 'category')
at filterModelBuilder.ts:106:32
at Array.find (<anonymous>)
at getActiveFilterOption (filterModelBuilder.ts:175:15)
at index.tsx:64:30

Steps to Reproduce

1. Go to the demo page at /demo
2. Click on "Server-Side Data" tab
3. Click back on "Client-Side Data" tab
4. Check browser console for errors

Expected Behavior

No errors should occur when switching between tabs. The QuickFilterDropdown should handle grid instance changes gracefully.

Possible Causes

• Grid API references not being cleaned up properly when switching tabs
• QuickFilterDropdown trying to access filters before new grid is initialized
• Missing cleanup in useEffect hooks when component unmounts
• Grid instances might be sharing state between tabs

Suggested Fix

• Add proper cleanup when grid is destroyed
• Check if grid API is valid before accessing filter model
• Consider using a key prop on grid components to force full remount
• Add null checks in filterModelBuilder.ts before accessing filter properties

Context

Found while working on the v2 headless components refactor in PR for feat/v2-headless-components branch.

[ryanrozich]

This issue has been resolved by PR #102 (Release v0.2.0-rc3). The QuickFilterDropdown component has been completely rewritten using the headless UI pattern, which eliminated the tab switching errors.

The new architecture properly manages state and component lifecycle, preventing the errors that occurred when switching between tabs.

See HEADLESS_RC3_MIGRATION_PLAN.md for implementation details.