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:
d3232dcc00/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. -->
This commit is contained in:
Liam DeBeasi
2023-06-15 11:53:04 -04:00
committed by GitHub
parent d555375c14
commit 7a38a006a9
2 changed files with 23 additions and 1 deletions

View File

@ -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) {

View File

@ -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);
});
});