Skip to content

Overwritting custom buttons in interfaceOptions of alert-type ion-select #21155

New issue

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

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

Already on GitHub? # to your account

Closed
DaniilVysotskiy opened this issue Apr 29, 2020 · 6 comments
Closed
Labels

Comments

@DaniilVysotskiy
Copy link

What is the purpose of this? Why dont you allow to customize buttons in alert-type ion-select component?

Now I'm stuck, as multiple-selection is supported only in alert-type controllers, non else.

https://github.com/ionic-team/ionic/blob/2e8cc8ebc5e6bd4f8868b1668cb18e0ca691886c/core/src/components/select/select.tsx#L339

@ionitron-bot ionitron-bot bot added the triage label Apr 29, 2020
@liamdebeasi
Copy link
Contributor

Thanks for the issue. The Ok and Cancel buttons are required in the select to give users a way of cancelling or confirming their selection.

You can customize the buttons by setting the okText and cancelText properties on ion-select.

For more information, please see the ion-select Documentation.

@DaniilVysotskiy
Copy link
Author

@liamdebeasi customizing of two default button's text is not what I meant. But whatever.
Thanks for reply.

@liamdebeasi
Copy link
Contributor

@DaniilVysotskiy Can you clarify what you meant?

@DaniilVysotskiy
Copy link
Author

@liamdebeasi sure. What I meant is that ion-select Documentation is saying that:

interfaceOptions

Any additional options that the alert, action-sheet or popover interface can take. See the AlertController API docs, the ActionSheetController API docs and the PopoverController API docs for the create options for each interface.

But in fact I can not fully use AlertController API as it's stated in the documentation and the sample code given below won't work, which at first is confusing, because the reason why is hidden in source code at the line I pointed at subject:

buttons

Array of buttons to be added to the alert.
(string | AlertButton)[]
[]

  customAlertOptions: any = {
    header: 'Pizza Toppings',
    buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            // dismissing logic goes here
          }
        }, {
          text: 'Submit',
          handler: () => {
            // business logic goes here
          }
        }, {
          text: 'Check/Reset All',
          handler: () => {
            // extra selection logic goes here
          }
        }
      ]
  };

So in fact, there is no custom buttons support for alerts-type ion-select and docs are missleading.

But I managed to get around the problem by creating own custom modal component from scratch, which includes page-like component with ion-checkbox, ion-searchbar, ion-buttons and others needed for business logic. Then just calling it via default ion-select component with shuted down event propogations and deafults to intercept opening dialog event to show own modal component instead.

@liamdebeasi
Copy link
Contributor

liamdebeasi commented Apr 30, 2020

Thanks for the clarification! Yeah this behavior is intentional -- The docs do mention that overriding inputs and buttons will not work: https://ionicframework.com/docs/api/select#interface-options

Note: interfaceOptions will not override inputs or buttons with the alert interface.

I do think the note is hard to find, so I will update the docs so this is clearer.

@ionitron-bot
Copy link

ionitron-bot bot commented May 30, 2020

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 30, 2020
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants