Controlled value with multiple not working as expected

[k-grube]

Describe the bug A clear and concise description of what the bug is.

To Reproduce https://codesandbox.io/s/busy-thompson-zhldb?file=/src/App.js

1. select 2 options
2. try to select another option, it should not be allowed, but the option is selected

Expected behavior selected values should reflect the value prop passed in

Screenshots See code sandbox

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 96

Additional context It seems to me like this should work, but if there's a different way to handle controlling this input I would love to know how.

[tbleckert]

Thanks!

As you said, this is a bug, or rather a design flaw. Need to add support for fully controllable values. Right now the internal value is always updated. Workaround below but will keep this open until a fix is released.

The onChange handler is set after the value has been updated. What happens in your code is that you stop tracking the value after 2 has been chosen. What you need to do is to slice the values in your else, like this:

setValue(values.slice(0, 2));