ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
127 stars 85 forks source link

<ion-input> and <ion-icon> click events not firing after upgrade to 3.4.0 #288

Open ionitron-bot[bot] opened 5 years ago

ionitron-bot[bot] commented 5 years ago

Original issue by @stevebread on 2017-08-19T18:29:50Z

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

After upgrade from 3.3.0 to 3.4.1, click event is not fired for <ion-input> and <ion-icon>

Expected behavior:

Click events should be fired as before

Steps to reproduce: This issue is reproducible on Android (I'm using Genymotion with Galaxy S7 7.1.0 API 25 virtual device). The same code on Plunkr does not exhibit this issue. Please see the attached file for an app that reproduces the issue. The package.json is for v3.3.0. Clicking on the input field and the icon increments the counters. The zip also includes the package.json for 3.4.1. With a 3.4.1 build the counters do not increment when clicking either the input or icon.

Related code: View:

<ion-header>
</ion-header>
<ion-content padding [formGroup]="myForm">
  <ion-item>
    <ion-label stacked>Selected value:</ion-label>
    <ion-input formControlName="selectedValue" (click)="onInputClick()"></ion-input>
    <ion-icon name="search" item-right (click)="onIconClick()"></ion-icon>
  </ion-item>
  <div>inputClickCount: {{inputClickCount}}</div>
  <div>iconClickCount: {{iconClickCount}}</div>
</ion-content>

ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {FormBuilder, FormGroup} from "@angular/forms";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  inputClickCount = 0;
  iconClickCount = 0;
  myForm: FormGroup;

  constructor(public navController: NavController, private fb: FormBuilder) { }

  ngOnInit() {
        this.myForm = this.fb.group({
      selectedValue: [{value: 'click me', disabled: true}],
    });
  }

  onInputClick() {
    this.inputClickCount++;  
  }

  onIconClick() {
    this.iconClickCount++;  
  }
}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below): For 3.3.0

cli packages: (C:\Users\Steve\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 6.5.0

local packages:

    @ionic/app-scripts : 1.3.7
    Cordova Platforms  : android 6.1.2
    Ionic Framework    : ionic-angular 3.3.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.9.5
    npm               : 3.10.10
    OS                : Windows 10

For 3.4.1

cli packages: (C:\Users\Steve\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 6.5.0

local packages:

    @ionic/app-scripts : 1.3.7
    Cordova Platforms  : android 6.1.2
    Ionic Framework    : ionic-angular 3.4.1

System:

    Android SDK Tools : 25.2.5
    Node              : v6.9.5
    npm               : 3.10.10
    OS                : Windows 10

sample-app.zip

pravin02 commented 5 years ago

I also facing same issue, UI - <ion-item (click)="openStartDatePicker()">

Start Date
            <ion-input formControlName="startDate"></ion-input>
        </ion-item>

Component code - openStartDatePicker() { console.log('openStartDatePicker'); this.keyboard.close();
this.datePicker.show({ date: new Date(), mode: 'date', androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_DARK }).then( date => { console.log('Start Date ', date); let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); let month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1); }, err => console.log('Error occurred while getting date: ', err)); }

Framework Details,

Ionic:

ionic (Ionic CLI) : 4.10.1 (C:\Users\Pravin P Patil\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 1.2.1, (and 13 other plugins)

System:

Android SDK Tools : 26.1.1 (E:\Softwares\Android Studio\SDK) NodeJS : v8.11.4 (C:\Program Files\nodejs\node.exe) npm : 5.6.0 OS : Windows 10

SchneMa commented 5 years ago

facing the same issue with click event on ion-input: Ionic CLI: 5.2.1 Ionic Framework: 4.1.1

Cordova CLI: 9.0.0 Cordova Platforms: IOS 5.0.1

Bug appears only on IOS Android is working finde

I don't know if this is realted with that click event bug but ionFocus is triggered at least 2 time for each focus.