scale
scale copied to clipboard
telekom
React: Funky reactivity / component value binding
The first pair of inputs in App.tsx are supposed to "reject" all "a" characters (i.e. simply remove it immediately when one is detected. This is achieved using an effect that fires whenever the text value is updated. The normal HTML input works just fine: Trying to type an "a" in there just won't do.
However: When using the Scale TextField, the effect is triggering correctly (state value gets updated properly) but the Scale TextField still shows the "a" character(s) at the end. It seems that the value change from the outside is not properly reflected into the component's internal state?
Going one step further: The second pair of inputs is bound so that only their value is bound but no change handler is registered. (Yeah, we could discuss the sense or meaning of this, of course, but let's just stick with the tech for a second 😅). The regular input element will be effectively "read only" since the underlying React value doesn't change. The Scale TextView component, however, allows editing - at least "optical" since the state changes are not sent to the React app, of course.
Ok, after some playing around with it, I am still clueless, the ScaleTextField detects changes on the value prop and handles it.
I have tried to work with the onKeyDown eventlistener to filter the input with event.key
The performance was a bit better, but still not good.
And the ScaleTextField onChange eventlistener triggered everytime
Yeah I've played around with different event types etc. But the general issue is that the Scale components seem to detach their internal state from the values that are given from the outside world.
After typing an "a" into the ScaleTextField, the change handler properly fires. Which in turn updates the text state, which triggers the effect to run, which re-updates the text state once again (with the string cleaned from all "a" instances). However, the ScaleTextField just doesn't pick up that last change.
Sorry for the super-late reply. @defaude ScaleTextField cannot be "controlled" like a regular input, this I'm 99% certain. So the 2 things I would like to figure out would be: (1) is the wrapper to blame for this? and (2) can we make this work without the component being "controlled"?
We'll hopefully find some time to look at this in the upcoming days.
(Thanks for creating the repo.)
