feat: For the ion-select component, set max number of multiple elements that disables further selection

[bbohach]

Ionic version:

[ ] 4.x [x] 5.x

I'm submitting a ...

[ ] bug report [x] feature request

Current behavior:

Currently, you can enable multiple selection by setting multiple to true

Expected behavior:

Set multiple to a number, and that number is the max amount of elements that can be selected

Related code:

let array = [0, 1, 2, 3, 4]
<ion-select [multiple]="3">
  <ion-select-option *ngFor="let i of array" [value]="i"></ion-select-option>
</ion-select>

I think this would be a nice feature added on ion-select. I've been trying to find a way to currently do this but no events get triggered on the selections until after the popover is closed. If it could be dynamic while the popover is open, that would be very nice! Let me know if there's any way I can help

[amandaejohnston]

Thanks for the feature request! Can you give more info on your use case?

Also just want to clarify that if this feature is added, it will be in at least Ionic 6, as development on Ionic 5 ended on Dec 8, 2021. (I'm noting this because you checked 5.x for the version.)

[bbohach]

Yes, that makes perfect sense to me!

Yeah, I can try. I'm trying to think of a standard use case, but one of my use cases is for selecting toppings on a pizza. We want to limit the amount of toppings on a pizza to 3, so when 3 toppings are selected we want to disable the user from selecting more options. Right now if they select more than 3, we're undoing their last selection and opening the ion-select if that means nothing has been chosen. Makes for a weird user experience...

I guess another use case would be selecting topics of a piece of content. Users upload .epub files and select the topics associated with it, and we want to limit the topics to 4 (somewhat arbitrary) so their content doesn't show up under all of our topics that we display in another part of the app. We're doing the same thing mentioned above and have been told that it's not a great solution...

If there's a different way of achieving this with a standard component then I'm open to ideas, but this seems to make the most sense from the users perspective. Let me know if you need anything else!

[amandaejohnston]

Thanks for the details 👍 Your examples make sense. I've talked this over some with the team, and one consideration brought up is the usability concern around an open ion-select not having much screen real estate. This makes it more likely that other options you've selected are off-screen, so it can be confusing when everything else suddenly becomes disabled. A select may not be the best choice for complex behavior like this.

A possible alternative would be to show a list of checkboxes inline instead and collect the values in an array when any of them fire ionChange. Then, if the max is hit, disable the rest of the checkboxes. (Example) If the list is particularly long, it could be wrapped in an ion-accordion or maybe a sheet modal.

Could you give this a shot and let me know if it solves your use case?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!