search

mantinedev / mantine

A fully featured React components library
https://mantine.dev
MIT License
26.79k stars 1.9k forks source link

MultiSelect doesn't allow to select more items (when having maxSelectedValues) #1028

Closed MIGUELez11 closed 2 years ago

MIGUELez11 commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

You can select values from the dropdown when having a MultiSelect component with the maxSelectedValues prop. When reached the limit, a React ref (valuesOverflow) is set to true, and the dropdown does not appear anymore.

The problem is when you update any of the following props: value or maxSelectedValues, the React ref is not recalculated, and you can not keep selecting items (if the value updated to a lower length or the maxSelectedValues is increased).

In which browser did the problem occur

Brave, Chrome

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/unruffled-orla-mtl75y?file=/src/App.js

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

Update the React ref valuesOverflow when the value or the maxSelectedValues props are updated.

rtivital commented 2 years ago

@achmurali I thought this was fixed, can you have a look at that?

MIGUELez11 commented 2 years ago

@rtivital @achmurali As I've seen, in commit a265744 it was fixed when pressing Backspace and on handleClear but not on value or maxSelectedValues change.