bug: ionKeyboardDidShow does not fire on android/chrome

[jmannau]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

On iOS, the ionKeyboardDidShow & ionKeyboardDidHide events are fired correctly. This does not happen on Android devices. I have tested this on the following devices

• Real device with Android 8.0.0 with Chrome 83.0.4103.106
• Android Emulator Android 9.0 with Chrome 69.0.3497. 100

Expected behavior:

For compatible versions of Chrome & Safari, ionKeyboardDidShow & ionKeyboardDidHide events should fire.

Steps to reproduce:

1. Create an Android 9 Emulator
2. On the emulator, open https://jmannau.github.io/ionic-keyboard-event-test/home
3. Click in the input box. The Keyboard Is Visible field should show true. If no events are fired then Keyboard is Visible stays false

Related code:

I have created a simple repository to test the events on different devices https://github.com/jmannau/ionic-keyboard-event-test you can goto this link and test the events https://jmannau.github.io/ionic-keyboard-event-test/home

Other information:

For the devices I have tested, the problems appears to be related to layoutViewportDidChange.

ionic-framework/core/src/utils/keyboard/keyboard.ts

Lines 110 to 115 in c7e94a1

	const layoutViewportDidChange = (): boolean => {
	return (
	currentLayoutViewport.width !== previousLayoutViewport.width ||
	currentLayoutViewport.height !== previousLayoutViewport.height
	);
	};

This returns true and prevents the detection of keyboard showing in keyboardDidOpen

ionic-framework/core/src/utils/keyboard/keyboard.ts

Lines 75 to 83 in c7e94a1

	export const keyboardDidOpen = (): boolean => {
	const scaledHeightDifference = (previousVisualViewport.height - currentVisualViewport.height) * currentVisualViewport.scale;
	return (
	!keyboardOpen &&
	previousVisualViewport.width === currentVisualViewport.width &&
	scaledHeightDifference > KEYBOARD_THRESHOLD &&
	!layoutViewportDidChange()
	);
	};

.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.16 (/Users/james/.npm/_npx/30492/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.901.11
   @angular-devkit/schematics    : 9.1.11
   @angular/cli                  : 9.1.11
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.2 (/Users/james/.nvm/versions/node/v12.16.2/bin/node)
   npm    : 6.14.5
   OS     : macOS Catalina

[liamdebeasi]

Thanks! It looks like when the keyboard opens in Google Chrome on Android, the entire view is resized (both layout and virtual viewports), whereas Safari on iOS only resizes the virtual viewport. Our keyboard utility had too much of a dependence on the layout viewport not changing, which caused this bug.

Can you try the following dev build, and let me know if it resolves the issue?

npm i @ionic/angular@5.3.0-dev.202007131503.3cbf9e7

[jmannau]

I've updated the test app and tested it on our devices and it looks good :D. Thanks very much for such a quick response!

…

On Tue, 14 Jul 2020 at 01:12, Liam DeBeasi ***@***.***> wrote: Thanks! It looks like when the keyboard opens in Google Chrome on Android, the entire view is resized (both layout and virtual viewports), whereas Safari on iOS only resizes the virtual viewport. Our keyboard utility had too much of a dependence on the layout viewport not changing, which caused this bug. Can you try the following dev build, and let me know if it resolves the issue? npm i @***@***.*** — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#21734 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABK6JOVYKL3GSU6BTDGL2DR3MP6VANCNFSM4OYFQ6BQ> .

[liamdebeasi]

Thanks for the issue. This has been resolved via #21741, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.