Closed valente closed 2 months ago
@valente I'm not opposed to building this into the component to handle a value that is undefined
to get the component back to it's initial state, but this can already be accomplished via a key
.
If you set a key
on the component and change the value when you'd like to instruct react to throw away the existing component tree and rebuild it, this will effectively "reset" the component state. Here's an example
Would this work for your use case?
Thanks. Yes, that might work.
One note though: I notice the initial movement to set the slider becomes glitchy. The slider is first drawn with the slider to the left, then when I try to move it with the mouse, the drag behavior suddenly stops (due to the component being rebuilt, now that the value is not undefined anymore, and thus its key changed), and I have to start dragging again.
@valente Could you share a screencap of what you mean? I'm not seeing any glitchy behavior from the example I posted. Maybe your usage is slightly different?
https://github.com/carbon-design-system/carbon/assets/3360588/0ca9c3bb-a1e6-4344-b7eb-24e4db42e847
I modified your example to be closer to what I have. The slider state is held by an entity in the context. I simulated it in the example by adding a parent-child relationship with a wrapper containing the slider.
Since the reset procedure is controlled outside of the component drawing the slider, generating a new key only when the value changes TO undefined, like you have, is a bit cumbersome, but probably can be done.
Hey, I just checked the issue with latest build and it seems it's fixed now. Please check the Stackblitz link for working example. Closing the issue as fixed.
Package
@carbon/react
Browser
No response
Package version
1.38
React version
18.2
Description
Slider initially allows an undefined / empty value. However, once initialized, it cannot go back to this state.
We need to have a deterministic output when value is undefined, irrespective of wether slider had previously a non-undefined value or not.
Reproduction/example
https://stackblitz.com/edit/github-kdxgwv?file=src%2FApp.jsx
Steps to reproduce
Suggested Severity
Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.
Application/PAL
No response
Code of Conduct