mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +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
|
* how it resizes such that the Visual Viewport API is not
|
||||||
* reliable here.
|
* reliable here.
|
||||||
*/
|
*/
|
||||||
if (nativeEngine !== undefined) {
|
if (nativeEngine) {
|
||||||
startNativeListeners(win);
|
startNativeListeners(win);
|
||||||
} else {
|
} else {
|
||||||
if (!(win as any).visualViewport) {
|
if (!(win as any).visualViewport) {
|
||||||
|
@ -38,6 +38,12 @@ const mockVisualViewport = (
|
|||||||
return win;
|
return win;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const mockCapacitor = (win: Window) => {
|
||||||
|
win.Capacitor = {
|
||||||
|
isPluginAvailable: () => false,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
const resizeVisualViewport = (win: Window, visualViewport: any = {}) => {
|
const resizeVisualViewport = (win: Window, visualViewport: any = {}) => {
|
||||||
win.visualViewport = Object.assign(win.visualViewport, visualViewport);
|
win.visualViewport = Object.assign(win.visualViewport, visualViewport);
|
||||||
|
|
||||||
@ -251,3 +257,19 @@ describe('Keyboard Assist Integration', () => {
|
|||||||
expect(window.dispatchEvent.mock.calls.length).toEqual(0);
|
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