Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/#6216 MultiSelect - SelectionLimit issue #6218

Merged
merged 7 commits into from
Apr 13, 2024
Merged

Fix/#6216 MultiSelect - SelectionLimit issue #6218

Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ccfc944
fix: 6216 disabled option with selectionLimit
charithAmila Mar 24, 2024
60a7031
Merge branch 'master' of github.com:primefaces/primereact into fix/#6216
charithAmila Mar 24, 2024
58b2ff8
fix: 6216 handle selectionLimit select all
charithAmila Mar 24, 2024
f8da90b
Merge branch 'master' into fix/#6216
melloware Apr 13, 2024
9fbc14e
Update MultiSelect.js
melloware Apr 13, 2024
dd1115a
Update MultiSelect.js
melloware Apr 13, 2024
c688fa6
Update MultiSelect.js
melloware Apr 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions components/lib/multiselect/MultiSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,6 +400,10 @@ export const MultiSelect = React.memo(
}
}

if (props.selectionLimit && value && value.length) {
value = value.slice(0, props.selectionLimit);
}

updateModel(event.originalEvent, value, value);
}
};
Expand Down Expand Up @@ -653,6 +657,10 @@ export const MultiSelect = React.memo(
return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
}

if (props.selectionLimit && props.value && props.value.length >= props.selectionLimit && !isSelected(option)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand why this check is needed. If the user exceeds the selected limit, other options do not need to be disabled.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @mertsincan
So how should selectionLimit work? Can users select more than the selection limit?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

according to prime react JSDoc selection limit should limit the amount of selections.

This is obviously a broken prop

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK I made some tweaks and thoroughly tested this. It is in line with how PrimeNG and PrimeVue handle this scenario. @mertsincan the reason we need to check if the current option is already selected is to allow them to unselect it. So in the scenario of selectionLimit={1} they need to be able to unselect the selected one

image

return true;
}

return option && option['disabled'] !== undefined ? option['disabled'] : false;
};

Expand Down
Loading