[Bug]: non-deterministic slider rendering for value={undefined}

[valente]

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

• Click Set 3 and Set 5. Slider gets new values.
• Click reset to go back to initial state.
• Observed: Slider doesn't change.

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

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@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?

[valente]

Thanks. Yes, that might work.

[valente]

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.

[tay1orjones]

@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

[valente]

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.

[preetibansalui]

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.