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

[simonhaenisch]

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

[simonhaenisch]

I just noticed that because doing a backdrop-dismiss clicks the button with 'cancel'role programmatically, the backdrop dismiss also has the same buggy behavior that it updates the value even though it should not.

[brandyscarney]

Thank you for the issue! I confirmed this is also an issue in Ionic 5's latest beta.

[brandyscarney]

I took a quick look into this, and found that the cause is that every time the picker column changes it calls updateDatetimeValue with the new value. The default handler for the cancel button sets it back to what it was:

https://github.com/ionic-team/ionic/blob/6e0b9c45489889266620ee2ca38c33fdf8ce3f3b/core/src/components/datetime/datetime.tsx#L305-L334

So not having this handler in the custom cancel button is the problem:

{ 
  text: this.cancelText, 
  role: 'cancel', 
  handler: () => { 
    this.updateDatetimeValue(this.value); 
    this.ionCancel.emit(); 
  } 
}, 

cc @liamdebeasi

[Et3rnal]

@brandyscarney Can you provide an example? I tried setting the handler but it didn't work and still, the value gets changed by clicking cancel as well as clicking on the backdrop

Also, why we don't get the default buttons like in "ionic-angular": "3.5.2" adding the select and cancel buttons is so problematic !!!

I'm currently on "@ionic/angular": "^4.7.1"

[simonhaenisch]

@brandyscarney I haven't debugged this to dig deeper into the cause of the issue, but a pretty straightforward fix seems to be

if (!buttons || buttons.length === 0) {
  // add default buttons
} else {
  const cancelButton = buttons.find(button => button.role === 'cancel');

  if (cancelButton && !cancelButton.handler) {
    cancelButton.handler = () => { 
      this.updateDatetimeValue(this.value); 
      this.ionCancel.emit(); 
    }
}

However I'm not sure if this still behaves correctly when a custom cancel handler is passed, i. e., am I supposed to manually take care of not updating the value, and is it even possible to do so?

[brandyscarney]

I think this might require some rework in how the picker + datetime communicate, but I'm going to tag in @liamdebeasi since he's spent more time with datetime and see if he has ideas.

[Et3rnal]

@simonhaenisch your fix works just fine. However, I would suggest we add

}else if (cancelButton){
    this.ionCancel.emit();
}

As I think we should always trigger the event unless we can do that from outside?
This would help with what you mentioned about taking care of not updating as currently the cancel event doesn't get triggered and I'm struggling to find a workaround this issue because of that.

when can we expect a fit to this? would you like a PR?

[danbn-100295]

same issue,anything update ?
I can't add custom button with role cancel

[YoniZiv]

EDIT: Found a solution

It's kind of an ugly solution, but it works for now...

Original post:

Same issue.

In my case, my ion-datetime is binded to a ReactiveForm using the formControlName attribute.
I'm passing an object to pickerOptions property (on ion-datetime) which contains a buttons array with 2 objects.

If I pass them this way

then by selecting a date nothing happens. (even if I provide a role: 'cancel' property)

Once I add a handler to 'confirm me' it looks like this:

and from this point forward, this is what happens:

until I click 'confirm me' - clicking 'cancel me' would cancel.
once I click 'confirm me' - the value is set to my selection
from this point forward - clicking 'confirm me' or 'cancel me' would set the selected value.

remarks:
1) 'confirm handler called' is being logged only when clicking 'confirm me'.
2) if I provide the 'role=cancel' property - it's the same behavior
3) giving 'cancel me' a different/null handler doesn't fix the bug.

[TanmaySM]

Any Updates on this? Its still persist on Ionic 5.0.4.

[dingzhanjun]

this is still true with ionic/react 5.5.0