Fix debounce by updating popover returnFocus

[AnnMarieW]

closes #495

When debounce=True, the value is updated when the input loses focus.

In a recent Mantine update, they changed the default popover prop returnFocus to false, which meant that the Input wasn't focused after the dates were selected. This broke the debounce because it wasn't possible to update the value when the input loses focus.

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output, html, callback
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

from datetime import datetime, date, timedelta


component = html.Div(
    [
        dmc.DatePickerInput(
            id="date-picker-input-multiple",
            label="Pick dates",
            description="Pick one or more dates",
            minDate=date(2020, 8, 5),
            value=[datetime.now().date(), datetime.now().date() + timedelta(days=5)],
            w=400,
            type="multiple",
            placeholder="Pick dates",
            maw=300,
            clearable=True,
            debounce=True,
        #    popoverProps={"returnFocus": True}   # this was required in order for the debounce to work in 0.15.2
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date-input-multiple"),
    ]
)


@callback(
    Output("selected-date-input-multiple", "children"),
    Input("date-picker-input-multiple", "value"),
)
def update_output(dates):
    return str(dates)

app.layout = dmc.MantineProvider(
    component
)

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

[github-actions]

Test Environment for snehilvj/dash-mantine-components-496
Updated on: 2025-01-28 22:06:25 UTC

[alexcjohnson]

Would we want to merge this with any popoverProps you provide explicitly? ie pull popoverProps out of props, then here:

popoverProps={{returnFocus: true, ...popoverProps}}

[AnnMarieW]

oh nice catch - yes, that's how it should work.

[AnnMarieW]

That needs to be applied to #471 too

[alexcjohnson]

💃