ion-picker can't get role of button clicked - ionic-framework

Question

I can’t seem to get the button role from ion-picker.
I need to know if it was ‘done’ or ‘cancel’.
Any ideas why this is?
I am just padding this out as stackoverflow is asking me to write some more details as my post is mostly code.
They data is just coming back as follows:
{data: undefined, role: undefined}
let opts: PickerOptions = {
cssClass: 'time-picker',
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Done',
role: 'done'
}
],
columns: [
{
name: 'hour',
options: [
{ text: '01', value: '01' },
{ text: '02', value: '02' },
{ text: '03', value: '03' },
{ text: '04', value: '04' },
{ text: '05', value: '05' },
{ text: '06', value: '06' },
{ text: '07', value: '07' },
{ text: '08', value: '08' },
{ text: '09', value: '09' },
{ text: '10', value: '10' },
{ text: '11', value: '11' },
{ text: '12', value: '12' },
{ text: '13', value: '13' },
{ text: '14', value: '14' },
{ text: '15', value: '15' },
{ text: '16', value: '16' },
{ text: '17', value: '17' },
{ text: '18', value: '18' },
{ text: '19', value: '19' },
{ text: '20', value: '20' },
{ text: '21', value: '21' },
{ text: '22', value: '22' },
{ text: '23', value: '23' },
{ text: '24', value: '24' }
]
},
{
name: 'minute',
options: [
{ text: '00', value: '00' },
{ text: '15', value: '15' },
{ text: '30', value: '30' },
{ text: '45', value: '45' }
]
}
]
};
const picker = await this.pickerCtrl.create(opts);
picker.present();
picker.onDidDismiss().then(async data => {
console.log(data);
const hour = await picker.getColumn('hour');
const minute = await picker.getColumn('minute');
this.onChangeFinishTime((hour.options[hour.selectedIndex].value) as number, minute.options[minute.selectedIndex].value as number);
this.isPickerOpen = false;
});

Answer 1

let pickerAction;
const opts: PickerOptions = {
cssClass: 'time-picker',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: value => {
pickerAction = 'cancel';
}
},
{
text: 'Done',
role: 'done',
handler: value => {
pickerAction = 'done';
}
}
],
columns: [
...
const picker = await this.pickerCtrl.create(opts);
picker.present();
picker.onDidDismiss().then(async data => {
if (pickerAction === 'done') {
const hour = await picker.getColumn('hour');
const minute = await picker.getColumn('minute');
this.onChangeFinishTime((hour.options[hour.selectedIndex].value) as number, minute.options[minute.selectedIndex].value as number);
}
this.isPickerOpen = false;
});

Answer 2

You need to move the logic from when the event onDidDismiss() is triggered (which means that the popover has disappeared, regardless of what action made it disappear) to the actual action of clicking the Done button.
This what the handler on Done does here, telling to set the value of the selected entry in the referenced column upon the popover dismissing as a consequence of clicking the Done button.
{data: undefined, role: undefined}
let opts: PickerOptions = {
cssClass: 'time-picker',
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Done',
handler: () => {
picker.dismiss().then(async data => {
console.log(data);
const hour = await picker.getColumn('hour');
const minute = await picker.getColumn('minute');
this.onChangeFinishTime((hour.options[hour.selectedIndex].value) as number, minute.options[minute.selectedIndex].value as number);
this.isPickerOpen = false;
});
}
}
],
columns: [
{
name: 'hour',
options: [
{ text: '01', value: '01' },
{ text: '02', value: '02' },
{ text: '03', value: '03' },
{ text: '04', value: '04' },
{ text: '05', value: '05' },
{ text: '06', value: '06' },
{ text: '07', value: '07' },
{ text: '08', value: '08' },
{ text: '09', value: '09' },
{ text: '10', value: '10' },
{ text: '11', value: '11' },
{ text: '12', value: '12' },
{ text: '13', value: '13' },
{ text: '14', value: '14' },
{ text: '15', value: '15' },
{ text: '16', value: '16' },
{ text: '17', value: '17' },
{ text: '18', value: '18' },
{ text: '19', value: '19' },
{ text: '20', value: '20' },
{ text: '21', value: '21' },
{ text: '22', value: '22' },
{ text: '23', value: '23' },
{ text: '24', value: '24' }
]
},
{
name: 'minute',
options: [
{ text: '00', value: '00' },
{ text: '15', value: '15' },
{ text: '30', value: '30' },
{ text: '45', value: '45' }
]
}
]
};
const picker = await this.pickerCtrl.create(opts);
picker.present();