Prevent opening ionic keyboard on button click

I made an Ionic v6 (using Capacitor) and Angular 14 app that has an input field and + and - button next to it for increasing and decreasing the number in that input field…

The issue I am facing is the keyboard… When I click/tap on the input field the keyboard opens up and a page scroll happens to scroll to the input. That is good and correct. But the issue is with the + and - buttons… When clicking/taping on the button it also opens the keyboard but the scroll to that input doesn’t happen.

So my question is… how do I prevent the keyboard from opening on these two buttons or if there is perhaps a way to scroll to that input?

Here is the code how the input is constructed and an image how it looks like:

<ion-item lines="none" slot="end" [disabled]="product.stock === null">
  <ion-icon color="vigros" name="remove-circle" (click)="decrementQty(product)"></ion-icon>
  <ion-input type="number" value="0" min="0" step="1" [(ngModel)]="product.qty"></ion-input>
  <ion-icon color="vigros" name="add-circle" (click)="incrementQty(product)"></ion-icon>
</ion-item>

Sounds like the elements are on top of each other maybe add some padding to the buttons on the sides to give it some space to make the target area bigger.

Since your just using ion-icon tags, you need to add padding or margins to each icon tag, or wrap each icon in the ion-button tag.

I have tried adding a ridiculous ammount of margin and padding to the buttons but the keyboard was still opening…

Thank you anyway… I’m thinking if there could be some disable keyboard function that I could call…

I think its because you nested the tags inside of the ion-item. Maybe try to create a div that wraps two ion-buttons and a separate ion-input between them. Something like this:

<div>
  <ion-button>+</ion-button>
  <ion-input></ion-input>
  <ion-button>-</ion-button>
</div>

You can use css-flex to align the buttons horizontally. The keyboard shouldnt open when clicken the buttons

1 Like