ion-datetime not working properly if it occurs more than once inside ion-item

[hebra]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.8
   @angular-devkit/core       : 0.8.1
   @angular-devkit/schematics : 0.8.1
   @angular/cli               : 6.2.1
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.3, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/heb/Library/Android/sdk)
   ios-deploy        : 2.0.0
   NodeJS            : v10.10.0 (/usr/local/Cellar/node/10.10.0/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 10.0 Build version 10L232m

Describe the Bug
When 2 or more ion-datetime elements are included within the same ion-input the selected date is always populated to the last included item.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create a new Ionic project
2. In the app.html create an ion-list -> ion-item and inside 2x ion-datetime
3. Start the app via ionic serve
4. Select the 1st date chooser and choose a date
5. the selected date actually appears in the 2nd ion-datetime element

Related Code

<ion-list>
  <ion-item [lines]="5">
    <ion-datetime placeholder="START DATE"></ion-datetime>
    <ion-datetime placeholder="END DATE"></ion-datetime>
  </ion-item>
</ion-list>

Expected Behavior
The selected date picker value should appear in the correct datetime element.

[topalavlad]

@hebra - can you paste the code or add a codepen example?
Is [(ngModel)] defined for your components?

[hebra]

@topalavlad the issue report was mis-formatted, just fixed it. It now also shows a code snippet.
There is no ngModel defined as it is a reactive form.

[topalavlad]

It looks like an issue:

The button that pop-ups up the date picker is set to absolute location (0, 0) and size (100%, 100%) so if you do inspect element on that row, the whole row is actually covered by the second datetime's button - button.datetime-cover

Check this comment out. Unfortunately I tried the same workaround as suggested there, but the button area becomes too small.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.