Inconsistent Checkbox Functionality and Lack of Firefox Functionality

[colinbrust]

I am using dash-ag-grid version 31.3.1 with dash 3.1.1. When using the default example on your website for selection using the header, there is inconsistent behavior between Firefox and Chrome. Additionally, it seems that some features are altogether not working in Firefox. The following issues I have found are:

1. Using the defaults from the website, none of the checkboxes are selectable when using Firefox. I am only able to select checkboxes if I change the suppressRowClickSelection setting to False.
2. On Firefox, when suppressRowClickSelection is false, I can only select multiple rows at a time if I hold the command key. Additionally, the header checkbox does not work and is not clickable.
3. On Chrome, none of the above issues exist. However, I did notice that when suppressRowClickSelection is False, clicking a row rather than a checkbox will uncheck all previously checked boxes (unless you are holding the Command key).

For reference, here is the snippet of code I am using to test this. I have tested on Ubuntu, Windows and Mac machines with the same results. Interestingly, everything works as intended on all browsers when I use the examples embedded in the Dash website. Let me know if any other information would be helpful.

import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash()

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
    {"field": "year"},
    {"field": "sport"},
    {"field": "total"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-selection-checkbox-header-function",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={
                "filter": True,
                "checkboxSelection": {
                    "function": 'params.column == params.columnApi.getAllDisplayedColumns()[0]'
                },
                "headerCheckboxSelection": {
                    "function": 'params.column == params.columnApi.getAllDisplayedColumns()[0]'
                }
            },
            dashGridOptions={
                "rowSelection": "multiple",
                "suppressRowClickSelection": True,
                "animateRows": False
            },
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)

[BSd3v]

Hello @colinbrust,

I'm not sure that these are caused by the Dash Wrapper around the component but more than likely would be an issue with AG Grid itself.

[AnnMarieW]

@colinbrust

What version of firefox are you using? The example you mentioned https://dash.plotly.com/dash-ag-grid/checkbox-row-selection#header-checkbox-selection works for me in both Firefox and Chrome

[colinbrust]

Hi @BSd3v and @AnnMarieW,

I did a little more experimenting and found that if I do a fresh script with only dash, dash-ag-grid and pandas installed, I'm able to run the following without any issue on Firefox (where test.py is identical to the code in the example linked above):

uv init --script test.py --python 3.12
uv add --script test.py 'dash-ag-grid==31.3.1' 'dash==3.1.1' 'pandas==2.3.1'
uv run test.py

If I copy test.py and run it in my actual project's venv, that is when the checkboxes are not selectable. Perhaps this is being caused by my other dependencies. Below is my pyproject.toml. I will test removing each on to see if there is a particular package that is causing issues:

[project]
name = "mdb"
version = "0.1.0"
description = "Version 2 of the Montana Mesonet Dashboard"
authors = [{ name = "colinbrust", email = "[email protected]" }]
requires-python = ">=3.12,<3.13"
dependencies = [
    "dash>=3.1.1,<4",
    "pandas>=2.0.0,<3",
    "dash-daq>=0.6.0,<1",
    "requests>=2.27.1,<3",
    "gunicorn>=23.0.0,<24",
    "Pillow>=11.0.0,<12",
    "python-dotenv>=1.0.0,<2",
    "neo4j-driver>=4.4.5,<5",
    "importlib-resources>=5.9.0,<6",
    "dash-mantine-components>=1.0.0,<2",
    "geojson>=3.0.1,<4",
    "dash-ag-grid>=31.3.1",
    "polars>=1.31.0",
    "httpx>=0.28.1",
    "dash-iconify>=0.1.2",
    "dash-leaflet>=1.1.2",
    "pyarrow>=20.0.0",
]

[dependency-groups]
dev = [
    "ipykernel>=6.7.0,<7",
    "matplotlib>=3.5.1,<4",
]

[build-system]
requires = ["hatchling"]
build-backend = "hatchling.build"

I'm not sure that it is a Firefox issue anymore, but I'm running this on Firefox v140.0.4.