-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: non-deterministic slider rendering for value={undefined} #14696
Comments
@valente I'm not opposed to building this into the component to handle a value that is If you set a 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? glitch.test.mov |
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. |
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
The text was updated successfully, but these errors were encountered: