dmc.DatePickerInput triggering callback when selecting first date but not the second

Dash Python
1

Is there a way to prevent the dmc.DatePickerInput via dash-mantine-components from triggering callbacks upon selecting the first date but not the second? I am using the latest 1.1.0 build

When using 0.12.1 I did not run into this issue and am attempting to migrate versions

2

Hi @bchurn
If you set debounce=True then the callback will be triggered when the input field loses focus.

3

Thanks for the reply @AnnMarieW! If I set debounce=True I get some unexpected behavior in two ways: 1) when initially clicking on the date picker, the callbacks are triggered (so loading modules display) even though the app does not update anything and 2) the callbacks only get triggered again once you select both date ranges and then also click one additional time which is confusing.

Alternatively, I tried using a number so something like debounce=100 and it still showed odd behavior. When I click the date picker initially, no callbacks triggered which seems correct but then when you select the first date, the callbacks are triggered (and unexpected loading modules show up).

Here is my component for reference, and please let me know if I am missing anything or whether there is a better solution here.

dmc.DatePickerInput(
                    id='date-filter',
                    valueFormat='MM/DD/YYYY',
                    type='range',
                    debounce=100,
                    clearable=False,
                    minDate=min(dates),
                    maxDate=max(dates),
                    value=[max(dates) - timedelta(days=27), max(dates)],
                    style={'width':'100%'} #needs to fill out the entire space it has
                ),
4

Not sure how you are using the loading modules, but if you use dcc.Loading you can set the delay_show prop which could be helpful

The debounce at 100 milliseconds wouldn’t be much different than zero. If you don’t like the debounce=True the only other workaround I can think of is to do something similar to the example in the docs that checks for 2 valid dates in the value prop in the callback.

5

Got it, the debounce method is a non-starter unfortunately but I think I can achieve what I am looking for by adjusting my loading component per your suggestion. Thank you!