Ionic-framework: bug: multiple inputs inside of an ion-item (ion-checkbox, ion-radio, ion-toggle, ion-datetime) combine click events

[RHinderiks]

Bug Report

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

Ionic:

   ionic (Ionic CLI)          : 4.2.0 (/Users/robinhinderiks/.nvm/versions/node/v8.11.4/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.12
   @angular-devkit/core       : 0.8.3
   @angular-devkit/schematics : 0.8.3
   @angular/cli               : 6.2.3
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 13 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/robinhinderiks/Library/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 6.0.0
   NodeJS            : v8.11.4 (/Users/robinhinderiks/.nvm/versions/node/v8.11.4/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 10.0 Build version 10A255

Describe the Bug
Lets say i have a checkbox and a ion-datetime in the same ion-item. I can not select the checkbox but instead will select the ion-datetime. This also happens when you have multiple ion-datetime's for example time selection from - to it will always select the last ion-datetime even if you click on the first one

Steps to Reproduce
Steps to reproduce the behavior:

1. Use the code below anywhere in your app.
2. Try to select the checkbox.

Related Code
<ion-item > <ion-checkbox slot="start" [(ngModel)]="block.selected"></ion-checkbox> <ion-datetime placeholder="startTime" [ngModel]="block.startTimeTest" display-format="HH:mm"></ion-datetime> </ion-item>
Expected Behavior
Be able to use both elements

[paulstelzer]

Thanks for your issue! Could you please check if this is still an issue in beta.17? That would be very nice :)

[RHinderiks]

Pressing the checkbox triggers the date picker

code:

<ion-item> <ion-checkbox slot="start"></ion-checkbox> <ion-datetime placeholder="select time" display-format="HH:mm"></ion-datetime> </ion-item>

[DavidStrausz]

This is not only an ion-datetime issue. Every selectable ion-item (ion-checkbox, ion-radio, ion-toggle, ion-datetime, ...) renders an auxilary button which has position: absolute and 100% width (input-cover() mixin) and these elements have a z-index of 2 set.

This causes 2 possible error scenarios:

1. It places these elements above every other potentially clickable item inside the ion-item (ion-button, a, ...) which makes it impossible to click on them
2. And it also causes the above mentioned collision if there are two selectable items inside the same ion-item which makes only the last one of them clickable

To fix both of the problems every clickable element needs a higher z-index than the first element and every selectable which is not the first element needs to be positioned relatively.

A quick (userland) fix would look something like this:

global.scss:

ion-item > .in-item ~ .in-item {
  position: relative;
}

ion-item > ion-button,
a {
  z-index: 3;
}

[brandyscarney]

Thanks for the issue! Just to add on to this, we currently have a class (item-multiple-inputs) that gets set when an item has multiple inputs like the following:

'item-multiple-inputs': this.multipleInputs,

What this currently does is target ion-select and ion-datetime so that their position will be relative, which makes the input cover only cover them (and not the entire item):

:host(.item-multiple-inputs) ::slotted(ion-datetime),
:host(.item-multiple-inputs) ::slotted(ion-select) {
  position: relative;
}

I haven't tested this theory with this issue, but I believe the fix may be adding other types of inputs to the querySelectorAll, and possibly some CSS styles:

// Check for multiple inputs to change the position to relative
const inputs = this.el.querySelectorAll('ion-select, ion-datetime');
this.multipleInputs = inputs.length > 1 ? true : false;

Links to code:
https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.tsx#L120-L121
https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.tsx#L143
https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.scss#L350-L358

[jakupi1]

IONIC 3 > IONIC 4 CHANGE MY MIND !

[iwantwin]

Can we perhaps change the title of this issue to indicate it is not only affecting ion-datetime but rather all of ion-item? This issue did not surface when I was looking for open bugs before I opened my issue ( #18210 ).

[brandyscarney]

@iwantwin Let me know if I missed anything!

[CitizenBeta]

I'm able to reproduce this issue with an ion-radio in slot=start and a button in slot=end. The button isn't clickable and clicking anything inside the ion-item selects the radio.

[lppedd]

Any news? Isn't this quite important?

[brandyscarney]

The original issue here has since been fixed (meaning the code example provided is now working). I put together a Codepen of different scenarios of the listed inputs (checkbox, radio, toggle, datetime) and those are all working in the same item: https://codepen.io/brandyscarney/pen/wvvxjXE?editors=1100

The only issue I see remaining is with a button + input, and there is a workaround for it. It would be really helpful if anyone still running into the issue could provide a code example that we can use to reproduce it if it is not already reproduced above.

[lppedd]

@brandyscarney For me the ion-checkbox still generates a full-width button, making intercepting click on the ion-item impossible (or better, both are fired).
And I've encountered this while trying a toy app.

The workaround "works", but any left empty space (also by margins) is dangerous, as it toggles the checkbox.

[brandyscarney]

@lppedd Could you create a new issue for this please? If you're saying there's a click event on the ion-item and also on the slotted checkbox it seems outside of the scope for this issue. I added something to fix the cover positioning in the PR by @DavidStrausz but the event will still propogate on the checkbox. I'm going to close this issue as resolved with that PR.

Edit: please provide the exact code you're using as well, this is the best way for us to make sure we have fixed a bug.

[daveshirman]

* Filthy hack alert: FAKE IT*

I ended up not using the ion-checkbox component and it works fine with this sort of markup:

<ion-list>   
  <ion-item *ngFor="let item of list" button="true" (click)="edit(item, $event)">
    <ion-buttons slot="start">
      <ion-button *ngIf="!item.isSelected" fill="clear" color="secondary" (click)="toggleSelectedRow(item, $event)">
        <ion-icon slot="icon-only" name="square-outline"></ion-icon>
      </ion-button> 
      <ion-button *ngIf="item.isSelected" fill="clear" color="success" (click)="toggleSelectedRow(item, $event)">
        <ion-icon slot="icon-only" name="checkbox-outline"></ion-icon>
      </ion-button> 
    </ion-buttons>
    <ion-label>
      .....        
    </ion-label>
  </ion-item>
</ion-list>

...calling in the methods firstly:

event.stopPropagation();

...because I thought it was worth it.

[ionitron-bot[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.