bug: setting datetime value externally causes value accessors to not set field as dirty

[TheEskir]

Ionic version:

[ ] 4.x [x] 5.x

I'm submitting a ...

[x] bug report [ ] feature request

Current behavior:

When an ion-datetime element with customPickerOptions has its value changed via user input, FormGroup (and FormGroupDirective) valueChanges-emitter is fired but the Form remains Pristine: True and Dirty: False.

Expected behavior:

When I change a value in a formComponent, the Form should be marked as Dirty.

Steps to reproduce:

Related code:

https://stackblitz.com/edit/ionic-1rbowd?devtoolsheight=33&file=pages/home/home.ts

Other information:

Possibly related to this: As mentioned in my stackblitz code-comment, whenever I define a [pickerOptions] on any ion-datetime element, the default buttons are gone and only the ones I define in my pickerOptions are displayed. This does not happen on stackblitz for whatever reason. When you use the default-buttons the bug does not occur.

EDIT: Overriding default button behavior seems to be a thing specific to Ionic5 (refer to my comment below)

Ionic info:

Ionic:

   Ionic CLI                     : 6.9.2 (C:\Users\******\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.5.4
   @angular-devkit/build-angular : 0.1100.7
   @angular-devkit/schematics    : 11.0.7
   @angular/cli                  : 11.0.7
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res : 0.14.0
   native-run  : 1.0.0

System:

   NodeJS : v12.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 7.11.1
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. It looks like your StackBlitz is using Ionic Framework v3. Does this bug happen in Ionic Framework v5 too? If so, can you please provide a code reproduction in Ionic Framework v5? It might be easiest to reproduce this inside of a blank Ionic starter app and provide a link to the GitHub repo.

[TheEskir]

Thanks for the issue. It looks like your StackBlitz is using Ionic Framework v3. Does this bug happen in Ionic Framework v5 too? If so, can you please provide a code reproduction in Ionic Framework v5? It might be easiest to reproduce this inside of a blank Ionic starter app and provide a link to the GitHub repo.

Hey there. Occurs in 5.x as well, I basically copypasted the code from where I found the issue in my application.

Interesting about the version, it's my first time using stackblitz.

I'll see about making a standalone example in a timely manner, gives me a chance to also check if the pickerOptions still behave strangely on a fresh project.

[liamdebeasi]

No problem -- we need to update some references to our StackBlitz starters since not all of them reference v5. Here is a v5 starter template if you would prefer to just use StackBlitz: https://stackblitz.com/edit/ionic-5-angular-10-starter

[TheEskir]

Hey, sorry for the long wait.

https://stackblitz.com/edit/ionic-5-angular-10-starter-pcpdlj?file=src/app/tab1/tab1.page.ts

This now exactly behaves like my application does - including the fact that pickerOptions overwrite default behaviour (you can check this yourself by taking out the OK-button in the pickerOptions)

Cheers.

[liamdebeasi]

Hey there,

I can reproduce this behavior, though I am still trying to understand what might be causing this to occur. I will update this thread when I have more info. Thanks!

[liamdebeasi]

The problem here appears to be related to how the value property is being set from outside of the ion-datetime component rather than from inside the component. We have some changes to ion-datetime in Framework v6 that should improve this behavior, so I am going to keep this issue open until v6 comes out.

[liamdebeasi]

Does this issue still reproduce with Ionic 6?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!