onMinimumReached and onMaximumReached events are always fired

[misheki]

<UIStepper displayValue={true} initialValue={item.qty} minimumValue={1} maximumValue={10} value={item.qty} onMinimumReached={console.warn(' min reached')} onMaximumReached={console.warn(' max reached')} onIncrement={() => this.increment(item.id)} onDecrement={() => this.decrement(item.id)} />

The onMinimumReached and onMaximumReached events are always triggered upon render even when the value is 3.

By the way, my UIStepper is inside a FlatList (loop).

Am I lacking a setting?

[hannigand]

Thanks for reporting the issue @misheki

Have you got a repository or a reproducible demo that I could use to fix the issue?

[misheki]

Hi @hannigand, sorry for the late response.

I don't have a demo on this yet because I realized that it does not bother my requirements as of now. However, I am facing a different issue with the VALUE setting. Even though I hardcoded it with the number 3, it still increments and decrements when I click on the plus and minus buttons. Should I close this and open a new issue?

Thanks!

[hannigand]

Hi @misheki - that's the expected behaviour.

When you set the value, it is not read-only and you can modify it by pressing the increment/decrement buttons.

[marcpicaud]

Hey @misheki , instead of this ;
onMinimumReached={console.warn(' min reached')}

Please try this :
onMinimumReached={() => console.warn(' min reached')}

Passing a function instead of an instruction will prevent the behavior you're describing. Cf. https://reactjs.org/docs/faq-functions.html#why-is-my-function-being-called-every-time-the-component-renders

Cheers