Open straygar opened 3 months ago
There are two problems going on here:
value
in DebounceInput
is Var[str]
, and it should be Var[Any]
so that any underlying API can be usedReflex actually renames the prop onChange
to onValueChange
for the radix Slider element, but the debounce doesn't take this into account, and so it never actually gets the sliders onValueChange
event fired and thus never updates. This is actually much harder to fix...
On the plus side, we are considering adding a reflex native "event throttling" mechanism. Similar to debounce, but actually to rate limit the number of events sent to the backend in a given time interval. We don't have a firm date for when such a feature will be available though.
I don't see an easy fix or workaround for this at the moment.
Thanks for the quick answer!
I haven't tried implementing a custom UI component in Reflex yet, but could a valid workaround (assuming the 1st point you mention gets fixed) be to implement my own <input type="range">
based component, and wrap it in a debounce_input()
?
EDIT: although that might also be problematic without using raw rx.html()
, as rx.input()
seems to assume a textual input (as it adds classes like rt-TextFieldInput
etc.).
EDIT: although that might also be problematic without using raw
rx.html()
, asrx.input()
seems to assume a textual input (as it adds classes likert-TextFieldInput
etc.).
We also have the el
namespace for basic HTML element, so you can maybe extend from rx.el.input
instead
Describe the bug
When using a controlled
rx.slider()
, I want theon_change
handler to be de-bounced, to have both:I have tried using
on_value_commit
, but it is pretty flakey. See Radix UI issue: https://github.com/radix-ui/primitives/issues/1760Instead, I opted to try
rx.debounced_input()
, but it is not compatible withrx.slider()
.I suspect
debounce_input()
is intended to work with semantic<input>
HTML elements, but Radix UI opted for their own funky implementation (a bunch ofspan/p/divs
). π€·ββοΈTo Reproduce Steps to reproduce the behavior:
If I specify a
value
onrx.slider()
, I get:If I omit it, I get a react compilation error:
Expected behavior Either:
on_value_commit
is not flakeydebounce_input
works with a sliderSpecifics (please complete the following information):