mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
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:
@ -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) {
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
Reference in New Issue
Block a user