[Bug] Dash 3: Weird Behaviour of the dmc.selct component inside a dmc.PopoverDropdown

[LecroartAntoine]

Hi,

Using dash_mantine_components 1.1.1 & dash 3.0.2 :

When I initialize a dmc.Select component, without "value" and "data", inside a dmc.PopoverDropdown, the Select component becomes bugged after updating value and data inside a callback : the Select's dropdown doesn't appear and the value is empty. Sometimes i can get it to work by clicking elsewhere and then back on the Select.

---

---

Here is a minimal code example to reproduce the bug :

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, callback, Input, Output

_dash_renderer._set_react_version("18.2.0")

app = Dash(__name__)

app.layout = dmc.MantineProvider(
    dmc.Center(
        [
            dmc.Stack(
                [
                    dmc.Button(
                        "Update Select",
                        id="update-select"
                    ),
                    dmc.Popover(
                        [
                            dmc.PopoverTarget(
                                dmc.Button(
                                    "Toggle Popover"
                                )
                            ),
                            dmc.PopoverDropdown(
                                dmc.Select(
                                    label="Select your favorite library",
                                    placeholder="Select one",
                                    id="framework-select",
                                    comboboxProps={"withinPortal": False}
                                ),
                                p="sm",
                                w="fit-content"
                            ),
                        ]
                    ),
                ]
            )
        ],
        style={"height": '100vh', "width": "100vw"}
    )
)

@callback(
    Output("framework-select", "value"),
    Output("framework-select", "data"),
    Input("update-select", "n_clicks"),
    prevent_initial_call=True
)
def update_select(_):
    value = "pd"
    
    data = [
        {"value": "pd", "label": "Pandas"},
        {"value": "np", "label": "NumPy"},
        {"value": "tf", "label": "TensorFlow"},
        {"value": "torch", "label": "PyTorch"}
    ]

    return value, data



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

---

---

Current workaround :

Initializing the dmc.Select component with a placeholder value and data is fixing the issue.

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, callback, Input, Output

_dash_renderer._set_react_version("18.2.0")

app = Dash(__name__)

app.layout = dmc.MantineProvider(
    dmc.Center(
        [
            dmc.Stack(
                [
                    dmc.Button(
                        "Update Select",
                        id="update-select"
                    ),
                    dmc.Popover(
                        [
                            dmc.PopoverTarget(
                                dmc.Button(
                                    "Toggle Popover"
                                )
                            ),
                            dmc.PopoverDropdown(
                                dmc.Select(
                                    label="Select your favorite library",
                                    placeholder="Select one",
                                    id="framework-select",
                                    comboboxProps={"withinPortal": False},
                                    data=["placeholder"],
                                    value="placeholder"
                                ),
                                p="sm",
                                w="fit-content"
                            ),
                        ]
                    ),
                ]
            )
        ],
        style={"height": '100vh', "width": "100vw"}
    )
)

@callback(
    Output("framework-select", "value"),
    Output("framework-select", "data"),
    Input("update-select", "n_clicks"),
    prevent_initial_call=True
)
def update_select(_):
    value = "pd"
    
    data = [
        {"value": "pd", "label": "Pandas"},
        {"value": "np", "label": "NumPy"},
        {"value": "tf", "label": "TensorFlow"},
        {"value": "torch", "label": "PyTorch"}
    ]

    return value, data



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

[LecroartAntoine]

There is also an issue with the Button if placed inside the popoverDropdown. Seams like opening the Popover, then closing it and opening it again prevent the button from registering clicks. I would guess the problem comes from PopoverDropdown and impact any components placed inside it.

---

Here is the updated Example to test :

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, callback, Input, Output

_dash_renderer._set_react_version("18.2.0")

app = Dash(__name__)

app.layout = dmc.MantineProvider(
    dmc.Center(
        [
            dmc.Stack(
                [
                    dmc.Popover(
                        [
                            dmc.PopoverTarget(
                                dmc.Button(
                                    "Toggle Popover"
                                )
                            ),
                            dmc.PopoverDropdown(
                                [
                                    dmc.Select(
                                        label="Select your favorite library",
                                        placeholder="Select one",
                                        id="framework-select",
                                        comboboxProps={"withinPortal": False},
                                        data=["placeholder"],
                                        value="placeholder"
                                    ),
                                    dmc.Button(
                                        "Update Select",
                                        id="update-select"
                                    ),
                                ],
                                p="sm",
                                w="fit-content"
                            ),
                        ]
                    ),
                ]
            )
        ],
        style={"height": '100vh', "width": "100vw"}
    )
)

@callback(
    Output("framework-select", "value"),
    Output("framework-select", "data"),
    Input("update-select", "n_clicks"),
    prevent_initial_call=True
)
def update_select(_):
    
    print("Update triggered")
    
    value = "pd"
    
    data = [
        {"value": "pd", "label": "Pandas"},
        {"value": "np", "label": "NumPy"},
        {"value": "tf", "label": "TensorFlow"},
        {"value": "torch", "label": "PyTorch"}
    ]

    return value, data



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

[LecroartAntoine]

Workaround : Use keepMounted=True inside the popover fix all issues.

[AnnMarieW]

@LecroartAntoine Thanks for reporting and for the workarounds.

It looks like this might be related to the change in how components are rendered in dash 3.0. The sample apps work as expected (without using any workarounds) using dash 2.18.2 and dmc 1.1.1

[LecroartAntoine]

I think anything inside a components that can be unmounted (tooltip, popover, hovercard...) will have issues triggering callbacks. Often the KeepMounted=True fix this issue.

[AnnMarieW]

Yes, I agree - we are working on a fix in Dash. If that doesn't fix the issue,, I'll update the docs to recommend setting the KeepMounted prop.

plotly/dash#3268

[datenzauberai]

It looks to me like MenuItem inside a MenuDropdown is also affected. keepMounted=True for the Menu helps here as well.

[AnnMarieW]

Yes, I have MenuItem and MenuDropdown included in the PR: https://github.com/snehilvj/dash-mantine-components/pull/558/files

Any other components need the update?