feat: add optgroup to select option

[JulioCVaz]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

I think is interesting to include html <optgroup> tag for ion-select. If is possible I wanna to implement this.

References: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup

Describe the Use Case

Use ion-select with optgroup tag, like:

<IonSelect
          aria-label="Fruit"
          placeholder="Select fruit"
          onIonChange={(e) => console.log(`ionChange fired with value: ${e.detail.value}`)}
          onIonCancel={() => console.log('ionCancel fired')}
          onIonDismiss={() => console.log('ionDismiss fired')}
>
         <IonOptGroup label="Fruits">
             <IonSelectOption value="apples">Apples</IonSelectOption>
             <IonSelectOption value="oranges">Oranges</IonSelectOption>
             <IonSelectOption value="bananas">Bananas</IonSelectOption>
          </IonOptGroup>
</IonSelect>

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the report. Can you help me understand what you are trying to accomplish? In the example you provided you can specify a group header using either the label property on ion-select or interfaceOptions: https://ionicframework.com/docs/api/select#interface-options

[JulioCVaz]

Thanks for the report. Can you help me understand what you are trying to accomplish? In the example you provided you can specify a group header using either the label property on ion-select or interfaceOptions: https://ionicframework.com/docs/api/select#interface-options

Sure @liamdebeasi

The ideia is to create a new tag to support optgroup in selects, like in HTML5.

The interfaceOptions is awesome to create headers and subheaders, but is possible to use in only one Select, correct?

Simplifying, is to add groups to ion-select :)

[liamdebeasi]

The interfaceOptions is awesome to create headers and subheaders, but is possible to use in only one Select, correct?

That's correct. The reason why we only have one group in an ion-select is because alert and action sheet only support single groups.

What problem are you trying to solve by adding multiple groups? Additionally, what are some of the alternatives you have tried?

[JulioCVaz]

The interfaceOptions is awesome to create headers and subheaders, but is possible to use in only one Select, correct?

That's correct. The reason why we only have one group in an ion-select is because alert and action sheet only support single groups.

What problem are you trying to solve by adding multiple groups? Additionally, what are some of the alternatives you have tried?

Perfect @liamdebeasi . In our company we have a some of selects that using optgroup to select stores and store items for exemple. Like:

Store 1 t-shirt Store 2 shoes

And recently we created a new design system for our UI. But we has this problem to use optgroups. To avoid this, we use disabled options as labels and normal options in the select.

[liamdebeasi]

Which interface are you using with ion-select? (alert, action sheet, popover)

[JulioCVaz]

Which interface are you using with ion-select? (alert, action sheet, popover)

is popover interface 👍

[liamdebeasi]

Thanks for the additional info. We had a similar request a few years ago, so we'd like to keep this open and collect community feedback before proceeding.

[ionitron-bot[bot]]

This issue has been labeled as community feedback wanted. This label is added to issues that we would like to hear from the community on before moving forward with any final decision on the feature request.

If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (+1). If you would like to provide an additional use case for the feature, please post a comment.

The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.

Thank you!

[btsiders]

I love this idea. It would help in cases where I have enough options in the select to need a little bit of grouping, but not enough options to split the select into one for groups and one for that group's options.

[JulioCVaz]

Hey @liamdebeasi, I hope you are well!

any update for the development of this comp? Can I help or develop it? :)