CODEWITHSUNDEEP
javascriptangulartypescriptionic-frameworkcapacitor
weinde
weinde

Reputation: 1156

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 HTML 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>

And here is the TS code of +/- button function as requested in the coments...

  incrementQty(produkt: Product['product']) {
    const increasedQty = this.product.qty += 1.00;

    this.cartService.addUpdateProductToCart(increasedQty, produkt).subscribe(
      (data: any) => {
        console.log(data);
        this.product.qty = this.product.qty;
        this.getCart();
        Keyboard.hide();
      },
      error => {
        console.log('Error', error);
      }
    );
  }

  decrementQty(produkt: Product['product']) {
    if(this.product.qty > 0) {
      const decreasedQty = this.product.qty -1;

      this.cartService.addUpdateProductToCart(decreasedQty, produkt).subscribe(
        (data: any) => {
          console.log(data);
          this.product.qty -= 1;
          this.getCart();
          Keyboard.hide();
        },
        error => {
          console.log('Error', error);
        }
      );
    }
  }

enter image description here

here is also the image of constructed DOM as requested in the comments: enter image description here

Upvotes: 0

Views: 522

Answers (2)

StackoverBlows
StackoverBlows

Reputation: 929

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.

Upvotes: 0

anis
anis

Reputation: 895

can u try this example of code

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

Upvotes: 0

Related Questions