Custom button for ion-select through [selectOptions] not working

Ionic Framework ionic-v3
1

I want an ion-select with one button saying ‘save’. I also want to use a handler for that button.
This is what my ion-select alert looks like currently:
image

The ‘cancel’ and ‘ok’ buttons should be replaced by just one ‘save’ button.
I was able to change the title and message of the ion-select alert, but for some reason the buttons won’t change.
In the docs it says this should be possible select - ionic API
Note: this select is a component.
In my .ts file:

this.selectOptions = {
      title: this.global.translate.selectPark,
      message: this.global.translate.onlyChooseOnce,
      buttons: [
        {
          // Save button
          text: this.global.translate.save,
          handler: () => {
            console.log('Save clicked');
            this.storage.set(this.parkKey, this.parkValue).then((value) => {
              console.log('storage.set returs: ', value);
              this.parkLocationChoose.setParkValue(this.parkValue);
            })
          }
        }
      ]
    }

my html:

<ion-select #parkSelect [selectOptions]="selectOptions">
      <ion-option *ngFor="let park of parks" [value]="parkValue">
        {{ park }}
      </ion-option>
</ion-select>
2

So I found out why it’s not working, Ionic disables it in the Select class:
Source: Ionic select on github (see the code below)

I find this very conflicting with the docs which say:
“Since ion-select uses the Alert , Action Sheet and Popover interfaces, options can be passed to these components through the selectOptions property. This can be used to pass a custom title, subtitle, css class, and more”

  open(ev?: UIEvent) {
    if (this.isFocus() || this._disabled) {
      return;
    }

    console.debug('select, open alert');

    // the user may have assigned some options specifically for the alert
    const selectOptions = deepCopy(this.selectOptions);

    // make sure their buttons array is removed from the options
    // and we create a new array for the alert's two buttons
    selectOptions.buttons = [{
      text: this.cancelText,
      role: 'cancel',
      handler: () => {
        this.ionCancel.emit(this);
      }
    }];
2 Likes
3

Bummer, I wanted to intercept the button handlers as well.