From 7a38a006a94f1240d93102f2f42bbfc4d76a679e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 15 Jun 2023 11:53:04 -0400
Subject: [PATCH] fix(keyboard): keyboard events emit correctly when Capacitor
 is available but the Keyboard plugin is not (#27655)

Issue number: resolves #27654

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When Capacitor and the Keyboard plugin are available,
`Keyboard.getEngine()` returns an object:
https://github.com/ionic-team/ionic-framework/blob/d3232dcc007738fae851660bd818c8056b48b7d2/core/src/utils/native/keyboard.ts#L19

When Capacitor is _not_ available this method returns `undefined`.

However, when Capacitor is available but the Keyboard plugin is not,
`Keyboard.getEngine()` returns `false`.

In https://github.com/ionic-team/ionic-framework/pull/27569 I fixed a
bug where the wrong listeners were being used to emit keyboard lifecycle
events. However, I did not know that method can return `false`, and our
tests only account for the `undefined` or defined edge cases. As a
result, if you are using Capacitor in an app that is deployed to the
browser then the visual viewport Ionic keyboard events never fire.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Visual viewport Ionic keyboard events fire in browser

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 core/src/utils/keyboard/keyboard.ts           |  2 +-
 core/src/utils/keyboard/test/keyboard.spec.ts | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/core/src/utils/keyboard/keyboard.ts b/core/src/utils/keyboard/keyboard.ts
index 2b43d3cacb..f87f00e6fc 100644
--- a/core/src/utils/keyboard/keyboard.ts
+++ b/core/src/utils/keyboard/keyboard.ts
@@ -31,7 +31,7 @@ export const startKeyboardAssist = (win: Window) => {
    * how it resizes such that the Visual Viewport API is not
    * reliable here.
    */
-  if (nativeEngine !== undefined) {
+  if (nativeEngine) {
     startNativeListeners(win);
   } else {
     if (!(win as any).visualViewport) {
diff --git a/core/src/utils/keyboard/test/keyboard.spec.ts b/core/src/utils/keyboard/test/keyboard.spec.ts
index e732fae730..52825703e3 100644
--- a/core/src/utils/keyboard/test/keyboard.spec.ts
+++ b/core/src/utils/keyboard/test/keyboard.spec.ts
@@ -38,6 +38,12 @@ const mockVisualViewport = (
   return win;
 };
 
+const mockCapacitor = (win: Window) => {
+  win.Capacitor = {
+    isPluginAvailable: () => false,
+  };
+};
+
 const resizeVisualViewport = (win: Window, visualViewport: any = {}) => {
   win.visualViewport = Object.assign(win.visualViewport, visualViewport);
 
@@ -251,3 +257,19 @@ describe('Keyboard Assist Integration', () => {
     expect(window.dispatchEvent.mock.calls.length).toEqual(0);
   });
 });
+
+describe('Keyboard Assist with Capacitor', () => {
+  beforeEach(() => {
+    resetKeyboardAssist(window);
+    mockCapacitor(window);
+    mockVisualViewport(window);
+    startKeyboardAssist(window);
+  });
+
+  it('should attach visual viewport listeners when Capacitor is available but the Keyboard plugin is not', () => {
+    resizeVisualViewport(window, { width: 320, height: 350 });
+
+    expect(window.dispatchEvent.mock.calls.length).toEqual(1);
+    expect(window.dispatchEvent.mock.calls[0][0].type).toEqual(KEYBOARD_DID_OPEN);
+  });
+});