ion-input becomes unresponsive after losing focus

[vasanthm7]

Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.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:

1. Click on ion-input and type something.
2. To close the keyboard click outside the keyboard and the input box.
3. During the time the keyboard is closing, try to scroll up or down.
4. When you try to edit the textbox, its unresponsive.

This happens inconsistently, I need to try the steps 2 and 3 around 10-15 times for the issue to happen.

Expected behavior:
The textbox should be editable at all times, shouldn't become unresponsive.

Steps to reproduce:
I created the ionic 2.x tabs starter project and added the following html in the about page.
I am able to replicate this on iPad (iOS version 10.2.1).
This issue is happening only on ion-input and not on input textbox.

Again as mentioned above, you need to try the steps 2 and 3 around 10-15 times to see the issue. On few occasions, I am able to reproduce it in 2-3 attempts.

Related code:

<ion-content padding>
  <ion-list>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><input type="text" placeholder="normal input"></ion-item>
    <ion-item><ion-input type="text" placeholder="ion input"></ion-input></ion-item>
  </ion-list>
</ion-content>

Other information:
I looked into the ion-input code and found that ionic creates a cloned input element during the time user focuses on the textbox and its supposed to be deleted once the keyboard is opened up.
I have noticed that when this issue happens, the cloned input element is not deleted for some reason.
Here's the screenshot showing the cloned input element present:

Since the cloned input element is not deleted, the user cannot edit the field and any changes to the model is also not shown on the UI to the user.

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

Cordova CLI: 6.0.0 
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.1.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Thanks, we will look into this.

[dagmawim]

Hey, @vasanthm7 did you ever find the fix to the issue?

[vasanthm7]

@dagmawim, I was able to fix the issue. I am not sure if this is the ideal approach though. Also, this fix doesn't work across the app, just in the field that we noticed this issue in.

This is the html:

<ion-content padding>
  <ion-list>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><div>Some text</div></ion-item>
    <ion-item><input type="text" placeholder="normal input"></ion-item>
    <ion-item><ion-input #inputText type="text" placeholder="ion input"></ion-input></ion-item>
  </ion-list>
</ion-content>

I added listeners to Keyboard open and close events as I noticed this issue during both the scenarios:

window.addEventListener('native.keyboardshow',(e)=>{this.keyboardHandler(e)});
 window.addEventListener('native.keyboardhide',(e)=>{this.keyboardHandler(e)});

The following methods will be invoked once the keyboard events are fired.

keyboardHandler(e){
        setTimeout(()=>{
            this.removeClone();
        }, 800);
    }
    removeClone(){
        let clonedInputList = this.inputText.getNativeElement().getElementsByClassName('cloned-input');
        if(clonedInputList.length > 0){
            this.inputText.getNativeElement().getElementsByClassName('cloned-input')[0].remove();
            this.inputText.getNativeElement().getElementsByClassName('input-ios')[0].style.pointerEvents = '';
            this.inputText.getNativeElement().getElementsByClassName('input-ios')[0].style.opacity = '';
            this.inputText.getNativeElement().getElementsByClassName('input-ios')[0].style.transform = '';
            this.inputText.getNativeElement().getElementsByClassName('text-input-ios')[0].style.transform = '';
        }
    }

[sergio-calle-seagull-com]

which version is the fix for this issue deployed in?

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