Ion-input Error: on iOS not tappable

[viniciustr]

Hello. I have a problem with a especific modal on my ionic2 app aplication.

When I tap on the text “DDD” or “Telefone”, nothing happens, and I don’t know de reason…

Note: I run this application on Simulator (on VM with MAC OS), but the LOG of simulator not show any error.

The code: https://pastebin.com/LixNidbB

<ion-header>
 
    <ion-navbar color="secondary">
        <ion-title>Informe os Dados</ion-title>
        <ion-buttons start>
            <button ion-button (click)="dismiss()">
                    <span ion-text color="primary" showWhen="ios">Cancelar</span>
                <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
 
</ion-header>
 
 
<ion-content padding>
 
    <ion-card>
        <ion-card-content text-center>
            Para finalizar, precisamos que nos informe seu telefone para contato
        </ion-card-content>
 
    </ion-card>
 
    <form (ngSubmit)="retornarDados()" #registerForm="ngForm">
        <ion-item>
            <ion-label floating>DDD</ion-label>
            <ion-input type="text" [attr.maxLength]="2" name="ddd" [(ngModel)]="form.ddd" required></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Telefone</ion-label>
            <ion-input type="text" [attr.maxLength]="9"  name="telefone" [(ngModel)]="form.telefone" required></ion-input>
        </ion-item>
 
        <ion-row padding>
            <button  ion-button color="secondary" block type="submit" [disabled]="!registerForm.form.valid">Salvar</button>
        </ion-row>  
    </form>
 
</ion-content>

Thanks!

[Sujan12]

Does it work in ionic serve?
What is your ionic info output?

[KishuPro]

@viniciustr

I don’t know de reason

Because you did not refer to the docs even after facing this problem. Here is an excerpt from their:

A basic item should be written as a element when it is not clickable

And your inputs are inside stand alone <ion-item> tags.

[viniciustr]

In the docs, this is allowed and apparently works.

I’ll test your suggestion anyway.

[KishuPro]

So you didn’t actually understand what I said there. Even the link you posted shows the <ion-item> inside a <ion-list>, that’s what I was mentioning when I said the item is stand alone in your code. It is not inside of a list in your code that’s why it’s not tappable, put it inside a <ion-list>

[viniciustr]

Thanks for reply, but not work
I still can not insert input data

Image of screen.

Log of iOS simulator:

Pastebin with code:
https://pastebin.com/4VBHfS3U

Any suggestions? I need this work

[viniciustr]

In ionic serve does not work because it is necessary to use the cordova. So I can only test on iOS Simulator, iPhone and Android Device.

On Android Device, it works perfectly.

But in iOS, neither in the Simulator or device. It’s not work.

ionic info output:

[Sujan12]

@viniciustr

In ionic serve does not work because it is necessary to use the cordova. So I can only test on iOS Simulator, iPhone and Android Device.

That looks like a simple form. What do you need Cordova for there?

[KishuPro]

Hey @viniciustr, don’t worry it’ll work. You’ve to understand one thing very clearly, we need to follow the basics! See, you still have an invalid markup, earlier you used the <ion-item> in a wrong way and now it’s the <ion-row> that might be the culprit. There might be more serious problems, but we’ve to tackle them one by one and the basics are the first things okay?

Try this code and let me know if it works:

<form (ngSubmit)="retornarDados()" #registerForm="ngForm">
   <ion-list>
      <ion-item>
         <ion-label>DDD</ion-label>
         <ion-input type="text" [attr.maxLength]="2" name="ddd" [(ngModel)]="form.ddd" required></ion-input>
      </ion-item>
      <ion-item>
         <ion-label>Telefone</ion-label>
         <ion-input type="text" [attr.maxLength]="9" name="telefone" [(ngModel)]="form.telefone" required></ion-input>
      </ion-item>
      <ion-item margin-top>
         <button ion-button color="secondary" block type="submit" [disabled]="!registerForm.form.valid">Salvar</button>
      </ion-item>
   </ion-list>
</form>

[viniciustr]

Because this form is called after the return off Facebook login

[Sujan12]

Then quickly start a new app (ionic start blank blank) and implement only the necessary things to show only this form. Then you can debug yourself in the browser. If you put it on Github we could even check it out and try ourselves.

[viniciustr]

Not work KishuPro

[KishuPro]

Hm okay, please always post the code you are using currently. I’d next try to rule out any form, data or attribute related problems. Try the code I am posting below and let me know whether you can input text in the boxes or not. As also, follow the instructions below.

1. Test the code I am giving below first and let us know the result.
2. Post the full html (template) code
3. Post the full ts (component) code
4. Follow what @Sujan12 suggested and create a new blank app to try this code without any other complications.
5. Post the package.json

Try this code first in your present app:

<ion-list>
  <ion-item>
    <ion-label>DDD</ion-label>
    <ion-input type="text" name="ddd"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Telefone</ion-label>
    <ion-input type="text" name="telefone"></ion-input>
  </ion-item>
  <ion-item padding>
    <button ion-button color="secondary" full>Salvar</button>
  </ion-item>
</ion-list>

[viniciustr]

@Sujan12 @KishuPro

Hi!

I found the problem that was happening after testing the code line by line. The problem was in the .ts file.

I called a Loading and it was open in the background, behind the Facebook login window, while the user typed in his login and password.

On Android it worked normally, however, on iOS it did not work at all.

I would like to thank you for your help and concern and apologize for any inconvenience. This is the tip for anyone who ends up making the same “error”.

[KishuPro]

No problems!

Hm that’s why we needed to see the full component and template files. Anyways, it’s good that you could debug it yourself

[AnjaliJ18]

I was having the same issue. I found the solution and just pushed the nav and not the modal. Everything works.