Slider onChangeEnd being called multiple times

Bug report

Describe the bug

I need to control my Slider and open a Popover as soon as the user finishes sliding it. To do so, I’ve created a state in my component that evaluates if the popover should be opened or not.

To make it work, I’ve added a function to onChangeEnd prop that updates my state, enabling the Popover to be displayed.

Since my Slider is controlled (I need to display it’s value elsewhere) I have an onChange function too, that updates another state (a Recoil state).

I’ve noticed that in this scenario, the Slider onChangeEnd is called multiple times.

To reproduce

You can check this sandbox and drag the slider. Open the console and see that for each time you finish dragging, we got a console log twice (instead of once)

Minimal reproduction

https://codesandbox.io/s/chakra-slider-onchangeend-multiple-executions-g7v0c

Expected behavior

The Slider component should be able to understand if the onChangeEnd was already called, and prevent from doing that twice.

[delucca]

For future reference my mistake was the following:

I was trying to set the popover state at the same level, or below, that the value of my progress slider state. So, that locked me into an infinite loop.

After lifting the popover state above (to the Recoil layer) all problems were fixed 😃

Thanks for your help guys!

[delucca]

Thanks 😃

In any case, I’ve followed your suggestion and moved the isOpen to the Recoil layer. I rewrote the entire component but now it is working as expected.