JS error when enabling both ‘floatingFilter’ and ‘agGroupColumnFilter’

[RunQi-Han]

It has been noticed that when both flags floatingFilter:True in default_col_Def is set and filter: agGroupColumnFilter is set in auto_group_column_def, it caused a js error as below as switching between tabs in a Dash app:

main.esm.mjs:9397  Uncaught TypeError: Cannot read properties of null (reading 'get')
    at Ls.preConstructOnComponent (main.esm.mjs:9397:57)
    at main.esm.mjs:808:67
    at Array.forEach (<anonymous>)
    at jt.callLifeCycleMethodsOnBean (main.esm.mjs:808:20)
    at main.esm.mjs:793:50
    at Array.forEach (<anonymous>)
    at jt.callLifeCycleMethods (main.esm.mjs:793:19)
    at jt.wireBeans (main.esm.mjs:675:10)
    at jt.createBean (main.esm.mjs:669:10)
    at Za.initComponent (main.esm.mjs:18215:18)

The error does not show up if turning either of them off. Here is a test code to reproduce the issue:

import dash
from dash import html, dcc, Input, Output
import dash_ag_grid as dag
import pandas as pd

app = dash.Dash(__name__)

# Sample data
data = pd.read_json("https://www.ag-grid.com/example-assets/olympic-winners.json")

# AG Grid options
column_defs = [
    {"headerName": "Country", "field": "country", "rowGroup": True, 'hide': True, "enableRowGroup": True},
    {"headerName": "Sport", "field": "sport"},
    {"headerName": "Year", "field": "year"},
    {"headerName": "Gold", "field": "gold", "aggFunc": "min"},
    {"headerName": "Silver", "field": "silver", "aggFunc": "avg"}
]

default_col_def = {
    "maxWidth": 140,
    "filter": True,
    "floatingFilter": True  # Comment out this line if the error persists
}

auto_group_column_def = {
    "minWidth": 180,
    "filter": 'agGroupColumnFilter'  # Comment out this line if the error persists
}

grid_options = {
    "columnDefs": column_defs,
    "defaultColDef": default_col_def,
    "autoGroupColumnDef": auto_group_column_def,
    "groupDisplayType": 'multipleColumns',
    "groupHideOpenParents": True,
}

app.layout = html.Div([
    dcc.Tabs(id="tabs-example", value='tab-1', children=[
        dcc.Tab(label='Grid', value='tab-1'),
        dcc.Tab(label='Other', value='tab-2'),
    ]),
    html.Div(id='tabs-content-example')
])

@app.callback(Output('tabs-content-example', 'children'),
              Input('tabs-example', 'value'))
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            dag.AgGrid(
                id='myGrid',
                className='ag-theme-alpine',
                rowData=data.to_dict('records'),
                dashGridOptions=grid_options,
                style={"height": "500px", "width": "100%"},
                enableEnterpriseModules=True,
            )
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Other Tab'),
            html.P('Other content goes here.')
        ])

if __name__ == '__main__':
    app.run_server(debug=True)

And the packages used are:

dash_ag_grid==31.2.0
dash==2.17.1

And the error looks like

This might be an issue with groupDisplayType and multipleColumns