Keyboard.hide() doesn't work in capacitor / ionic 6 project

Issue

I have a simple form that the user can enter a value and those two values are added together.

This is my form code:

 <form (ngSubmit)="calculateTwo(value1, value2)">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-item>         
            <ion-input name="value1" type="number" [(ngModel)]="value1" (keyup.enter)="calculateTwo(value1, value2)">
            </ion-input>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>       
            <ion-input name="value2" type="number" [(ngModel)]="value2"
              (keyup.enter)="calculateTwo(value1, value2)"></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-button shape="round" expand="full" type="submit">Calculate</ion-button>
  </form>

And this is my method in typescript:

calculateTwo(value1, value2) {
    this.result = "Result: " + (value1 + value2);
    Keyboard.hide();
  }

And I use this import:

import { Keyboard } from '@capacitor/keyboard';

When I open my app and I enter the the values and I want to submit the keyboard doesn't hide.

Is this a bug in capacitor?

Source:

https://capacitorjs.com/docs/v2/apis/keyboard

Solution

You have to synchronize your capacitor plugins to propagate your change to all platforms (ios & android) by running :

ionic cap sync

Answered By - Zrelli Majdi