bug: ion-datetime custom button with role="cancel" still updates value

Bug Report

Ionic version: [x] 4.x

Current behavior:

I use the pickerOptions property of the ion-datetime to add buttons with custom handlers. I add a “Cancel” button with role: 'cancel'. When I click that cancel button, the value of the ion-datetime changes anyway.

Expected behavior:

A picker button with role cancel should not change the ion-datetime’s value.

Steps to reproduce:

<ion-datetime display-format="YYYY" value="2019" />

document.querySelector('ion-datetime').pickerOptions = {
  buttons: [
    { text: 'Cancel', role: 'cancel' },
    { text: 'Done', handler: columns => console.log(columns.year.value) },
  ],
};

Related code:

https://codepen.io/simonhaenisch/pen/YzPwYZa?editors=1010

Other information:

I think #19441 is about the same issue but not sure.

This is the code that looks like it should be working:

https://github.com/ionic-team/ionic/blob/6e0b9c45489889266620ee2ca38c33fdf8ce3f3b/core/src/components/picker/picker.tsx#L166-L170

Ionic info:

@ionic/core: 4.11.5

[ipacbalaj]

Do you have any updates on this?

As a quick fix I added an @ngIf on the component and I am reinitializing the compnent in the cancel handler.

[dingzhanjun]

this is still true with ionic/react 5.5.0