Ion picker role = 'cancel' button does not cancel but sets the value that is focused.

Bug Report

Ionic version: “@ionic/angular”: “^4.4.0”,

Current behavior: Ion picker role = ‘cancel’ button does not cancel but sets the value that is focused.

Expected behavior: Pressing the cancel button must not set the value to the focused value but must just close the picker

Steps to reproduce: Set up buttons as below. Try to cancel the picker when open. The value is set instead of the picker just closed.

–>

  async showCurrencyPicker() {
    const options: PickerOptions = {
      cssClass: 'picker',
      buttons: [
         {
          text: translate[this.locale].cancel,
          role: 'cancel',
           cssClass: 'pickerCancel',
         },
        {
          text: translate[this.locale].done,          
          cssClass: 'pickerDone',
        }, ............

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.7.1 
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.1 (cordova-lib@8.1.0)
   Cordova Platforms     : android 7.1.1, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 10 other plugins)

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v10.1.0 (C:\Program Files\nodejs\node.exe)
   npm               : 5.6.0
   OS                : Windows 10

Plugin Version

(node:17752) ExperimentalWarning: The fs.promises API is experimental
cordova-android-firebase-gradle-release 1.0.3 "cordova-android-firebase-gradle-release"
cordova-android-play-services-gradle-release 1.4.4 "cordova-android-play-services-gradle-release"
cordova-android-support-gradle-release 3.0.0 "cordova-android-support-gradle-release"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-firebase 2.0.5 "Google Firebase Plugin"
cordova-plugin-googleplus 5.3.2 "Google SignIn"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.1.4 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.4.0 "Cordova sqlite storage plugin"

[5ebastianMeier]

This seems to be undocumented, but you can define a handler property on each button definition - all column data including selected indices is passed as an argument to that handler function.

      buttons: [{
        text: 'OK',
        handler: (value: any): void => { console.log(value, 'ok'); },
      }, {
        text: 'Abbrechen',
        role: 'cancel', // has no effect
        handler: (value: any): void => { console.log(value, 'cancel'); },
      }],

[vaibhavdabhi]

here is solution for cancel and ok button event in ion picker,if you are using ion label to show the selected value of picker component then first get the id of that label and the in cancel event put the code you want. step-1: <ion-label id="label2"> {{selected1[0]}}</ion-label>

step-2: put the handler event in ion-picker component.after getting id of that label set innerhtml property to null and on done event get the value of selected text code - buttons: [ { text: ‘cancel’, role: ‘cancel’, handler: (value: any): void => { console.log(value, ‘cancel’); if (value.value == value.value) { document.getElementById(“label1”).innerHTML = “”; } }, }, { text: ‘done’, role: ‘done’, handler: (value: any): void => { console.log(value, ‘cancel’); if (value.value == value.value) { document.getElementById(“label1”).innerHTML = value.weight.value+1 +“Kg”; } },

    }
  ]