snehilvj / dash-mantine-components

Plotly Dash components based on Mantine React Components
https://www.dash-mantine-components.com
MIT License
540 stars 54 forks source link

[Feature Request]Ability to debounce callbacks from Input/Select components #87

Open hrithikgavali opened 2 years ago

hrithikgavali commented 2 years ago

Hi there,

I switched my app to use Dash Mantine Components because of the beautiful components UI and flexibility. However, I miss the ability to debounce callbacks from input and dropdowns in dash core components. Debounce allows us to trigger callbacks on the input after losing focus or pressing Enter Key, instead of firing the callback for each letter typed in the input box.

  1. Is there a way to implement this with the current codebase?
  2. If not, is there a way to style a component from dash core components package, exactly like dash mantine components, using some kind of a wrapper?
mcpcpc commented 2 years ago

I second the need for this! this would definitely make large pattern-matching callbacks “feel” more performant.

snehilvj commented 1 year ago

I added ability to debounce callbacks by a certain duration, i.e., you can specify debounce=600 in your component and it will debounce callbacks by 600ms. Does it solve your purpose?

knightjdr commented 1 year ago

The debounce you've added is a useful feature, and technically what debounce should be doing. However, the debounce property in Dash Core Components will trigger a callback only when focus is lost or the enter key is pressed, rather than being based on a time interval. They shouldn't have called it debounce, but nevertheless.

The feature you have added will work for me for the time being, but if you are able in the future to add the Dash version of debounce, that would be greatly appreciated. Maybe just call it something else.

BSd3v commented 1 year ago

Currently, I cannot use this version of debounce because it triggers the callback and I have a running state that causes the input to disappear from the field of view.

emillma commented 1 year ago

It would be nice if DMC gets the same debounce behavior as DCC and DBC. I miss that pressing enter triggers the callback. What about keeping the current implementation but making it so that setting debounce='change' results in the same behavior as DCC and DBC? As a quick fix, I got the same debounce behavior using EventListener and listen for the change event.

sergei3000 commented 1 year ago

+1 for the "on change" kind of behavior. This would be much appreciated.

geophpherie commented 1 year ago

I too am in support of enabling debounce to work in the same fashion as DCC and DBC for a consistent interface across components.

In the meantime - it appears to me that, while debounce=1000 works for dmc.TextInput it does not appear to work for dmc.TimeInput in that the callback is immediately fired upon edit. This makes it hard to edit the time values as desired.

etiennecelery commented 1 year ago

It would be nice if DMC gets the same debounce behavior as DCC and DBC. I miss that pressing enter triggers the callback. What about keeping the current implementation but making it so that setting debounce='change' results in the same behavior as DCC and DBC? As a quick fix, I got the same debounce behavior using EventListener and listen for the change event.

Any chance you can share and example of your implementation?

jacopo-chevallard commented 1 year ago

@emillma it would be great to see your example while waiting for the possibility of a debounce behaviour more similar to dcc and dbc