IONIC 4 click event bug, I have to double click?

Ionic Framework
1

Cheers, I have an ion-item with an ion-input in it, what I want to do is when I click on the input field it scrolls down, so far everything works if I double click the input field, but why doesnt it trigger the event right away on the first click/tap ?

TS
image

Well I’ve tried click, ionClick, focus, tap, select, ionSelect, many things that don’t even exist, pretty much everything I saw people suggesting on old posts, but nothing fixed it

           <div>
              <ion-item>
                <ion-input type="text" (focus)='ScrollToBottom($event)'></ion-input>
              </ion-item>
            </div>

here are some old posts that refer to the same problem but no fix




I’m in ionic 4 there must be a way to fix this…

2

I am a newbie to this thing but why tap on an input-text field to scroll down to bottom?

3

Cheers
Welp the code I posted isn’t exactly what my code really looks like since I’m a dev on a company’s project and ofc I can’t go around sharing code, but I can share screenshots to explain it to you and serve as future reference to anyone who has the same problem

Ok so I have this login page

image
image.png1080×1920 98.3 KB

When I clicked on the username input this happened

image
image.png1080×1920 142 KB

Yeah really awkward, and then the user either used the Enter button to skip to the password field, or if they didn’t think of that they had to LITERALLY scroll down to click on the password field

I couldnt fix the 2 clicks to trigger the click event, so I ended up thinking of something else, I noticed that after the first click the keyboard opens, so I just listened to that event instead of the click event, when the keyboard opens he scrolls to the bottom, having the same end result as I wanted, this

image
image.png1080×1920 143 KB

1 Like
4

I fixed the issue with the next style in my login component:

my-component {
.input-cover {
display:none;
}
}

I think that maybe is not best solution but it works for me.