From 942bd86cb66e6f1852d00870f8c76d8aee11ff3f Mon Sep 17 00:00:00 2001 From: AHMED Date: Fri, 21 Jan 2022 09:34:24 +0200 Subject: [PATCH 01/10] disable Hot key Actions if vr keyboard is open . --- src/pages/home/report/ReportActionCompose.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 51759e6bb846..aeff4ab2fb13 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -49,6 +49,7 @@ import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider import DateUtils from '../../../libs/DateUtils'; import Tooltip from '../../../components/Tooltip'; import * as EmojiUtils from '../../../libs/EmojiUtils'; +import canUseTouchScreen from '../../../libs/canUseTouchscreen'; const propTypes = { /** Beta features list */ @@ -146,6 +147,7 @@ class ReportActionCompose extends React.Component { this.setTextInputRef = this.setTextInputRef.bind(this); this.getInputPlaceholder = this.getInputPlaceholder.bind(this); this.setPreferredSkinTone = this.setPreferredSkinTone.bind(this); + this.isVirtualKeyboardOpen = this.isVirtualKeyboardOpen.bind(this); this.state = { isFocused: this.shouldFocusInputOnScreenFocus, @@ -353,13 +355,27 @@ class ReportActionCompose extends React.Component { } } + /** + * Allows us to identify whether Virtual keyboard open or not + * + * @returns {boolean} + */ + isVirtualKeyboardOpen() { + // check if platform is web and supports virtualkeyboard + if (navigator && 'virtualkeyboard' in navigator) { + const keyboardPosition = navigator.virtualKeyboard.boundingRect.y; + return keyboardPosition > 0; + } + return canUseTouchScreen(); + } + /** * Listens for keyboard shortcuts and applies the action * * @param {Object} e */ triggerHotkeyActions(e) { - if (!e) { + if (!e || this.isVirtualKeyboardOpen()) { return; } From 0681d32a7d44818d1a7a45b51882aebc754f75f3 Mon Sep 17 00:00:00 2001 From: AHMED SHERIF Date: Fri, 21 Jan 2022 14:45:08 +0200 Subject: [PATCH 02/10] Update comment Co-authored-by: Rajat Parashar --- src/pages/home/report/ReportActionCompose.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index aeff4ab2fb13..c967a4f2352e 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -356,9 +356,8 @@ class ReportActionCompose extends React.Component { } /** - * Allows us to identify whether Virtual keyboard open or not - * - * @returns {boolean} + * Whether virtual keyboard is open or not + * @returns {Boolean} */ isVirtualKeyboardOpen() { // check if platform is web and supports virtualkeyboard From db12c7da7aafea391ad4012880fabc6fa09e8c66 Mon Sep 17 00:00:00 2001 From: AHMED SHERIF Date: Fri, 21 Jan 2022 14:46:00 +0200 Subject: [PATCH 03/10] delete not used line Co-authored-by: Rajat Parashar --- src/pages/home/report/ReportActionCompose.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index c967a4f2352e..0b3878e23ded 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -147,7 +147,6 @@ class ReportActionCompose extends React.Component { this.setTextInputRef = this.setTextInputRef.bind(this); this.getInputPlaceholder = this.getInputPlaceholder.bind(this); this.setPreferredSkinTone = this.setPreferredSkinTone.bind(this); - this.isVirtualKeyboardOpen = this.isVirtualKeyboardOpen.bind(this); this.state = { isFocused: this.shouldFocusInputOnScreenFocus, From 23f32fe984c17cacbb52f5b5a8f3c89ed6d75d63 Mon Sep 17 00:00:00 2001 From: AHMED SHERIF Date: Fri, 21 Jan 2022 14:46:18 +0200 Subject: [PATCH 04/10] refactor Co-authored-by: Rajat Parashar --- src/pages/home/report/ReportActionCompose.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 0b3878e23ded..537b34a3e6c4 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -361,8 +361,7 @@ class ReportActionCompose extends React.Component { isVirtualKeyboardOpen() { // check if platform is web and supports virtualkeyboard if (navigator && 'virtualkeyboard' in navigator) { - const keyboardPosition = navigator.virtualKeyboard.boundingRect.y; - return keyboardPosition > 0; + return navigator.virtualKeyboard.boundingRect.y > 0; } return canUseTouchScreen(); } From def44eeeae099e921549cc9c81f2e0bbd5875e6f Mon Sep 17 00:00:00 2001 From: AHMED SHERIF Date: Fri, 21 Jan 2022 14:46:37 +0200 Subject: [PATCH 05/10] fix typo Co-authored-by: Rajat Parashar --- src/pages/home/report/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 537b34a3e6c4..21503ca874e7 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -360,7 +360,7 @@ class ReportActionCompose extends React.Component { */ isVirtualKeyboardOpen() { // check if platform is web and supports virtualkeyboard - if (navigator && 'virtualkeyboard' in navigator) { + if (navigator && 'virtualKeyboard' in navigator) { return navigator.virtualKeyboard.boundingRect.y > 0; } return canUseTouchScreen(); From 5f3be5e6f6784e162fa4d61102bb9d42f324363e Mon Sep 17 00:00:00 2001 From: AHMED SHERIF Date: Fri, 21 Jan 2022 15:06:02 +0200 Subject: [PATCH 06/10] Update comment Co-authored-by: Rajat Parashar --- src/pages/home/report/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 21503ca874e7..92e19bc29b39 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -359,7 +359,7 @@ class ReportActionCompose extends React.Component { * @returns {Boolean} */ isVirtualKeyboardOpen() { - // check if platform is web and supports virtualkeyboard + // Whether the virtualKeyboard API is supported on the platform. if (navigator && 'virtualKeyboard' in navigator) { return navigator.virtualKeyboard.boundingRect.y > 0; } From 8e06a462120bb4f953728f9b53fcff68e286bd22 Mon Sep 17 00:00:00 2001 From: AHMED Date: Sat, 22 Jan 2022 15:53:26 +0200 Subject: [PATCH 07/10] split virtualKeyboard to lib --- src/libs/virtualKeyboard.js | 18 ++++++++++++++++++ src/pages/home/report/ReportActionCompose.js | 15 ++++++--------- 2 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 src/libs/virtualKeyboard.js diff --git a/src/libs/virtualKeyboard.js b/src/libs/virtualKeyboard.js new file mode 100644 index 000000000000..f28dc84c0bcf --- /dev/null +++ b/src/libs/virtualKeyboard.js @@ -0,0 +1,18 @@ +import _ from 'underscore'; + +/** + * Is the virtual keyboard open? + * + * @returns {Boolean|null} – null if the VirtualKeyboard API is unavailable + */ +function isOpen() { + if (!_.has(navigator, 'virtualKeyboard')) { + return null; + } + return navigator.virtualKeyboard.boundingRect.y > 0; +} + +export { + // eslint-disable-next-line import/prefer-default-export + isOpen, +}; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 92e19bc29b39..9b3e44338b8e 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -50,6 +50,7 @@ import DateUtils from '../../../libs/DateUtils'; import Tooltip from '../../../components/Tooltip'; import * as EmojiUtils from '../../../libs/EmojiUtils'; import canUseTouchScreen from '../../../libs/canUseTouchscreen'; +import * as VirtualKeyboard from '../../../libs/virtualKeyboard'; const propTypes = { /** Beta features list */ @@ -355,15 +356,11 @@ class ReportActionCompose extends React.Component { } /** - * Whether virtual keyboard is open or not - * @returns {Boolean} + * @returns {boolean} */ - isVirtualKeyboardOpen() { - // Whether the virtualKeyboard API is supported on the platform. - if (navigator && 'virtualKeyboard' in navigator) { - return navigator.virtualKeyboard.boundingRect.y > 0; - } - return canUseTouchScreen(); + shouldAssumeVirtualKeyboardIsOpen() { + const isOpen = VirtualKeyboard.isOpen(); + return _.isNull(isOpen) ? canUseTouchScreen() : isOpen; } /** @@ -372,7 +369,7 @@ class ReportActionCompose extends React.Component { * @param {Object} e */ triggerHotkeyActions(e) { - if (!e || this.isVirtualKeyboardOpen()) { + if (!e || this.shouldAssumeVirtualKeyboardIsOpen()) { return; } From a6e1078dee19e8e0c289e4ccf8676f88e9ced9d8 Mon Sep 17 00:00:00 2001 From: AHMED SHERIF Date: Mon, 24 Jan 2022 20:55:47 +0200 Subject: [PATCH 08/10] fix typo Co-authored-by: Rory Abraham <47436092+roryabraham@users.noreply.github.com> --- src/pages/home/report/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 9b3e44338b8e..e5275a53deab 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -356,7 +356,7 @@ class ReportActionCompose extends React.Component { } /** - * @returns {boolean} + * @returns {Boolean} */ shouldAssumeVirtualKeyboardIsOpen() { const isOpen = VirtualKeyboard.isOpen(); From e0efcf09b1e05ebee972a8b53792aa09ca0c302d Mon Sep 17 00:00:00 2001 From: AHMED Date: Mon, 24 Jan 2022 21:10:48 +0200 Subject: [PATCH 09/10] add des to shouldAssumeVirtualKeyboardIsOpen --- src/pages/home/report/ReportActionCompose.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index e5275a53deab..cb85d3267078 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -356,6 +356,10 @@ class ReportActionCompose extends React.Component { } /** + * As of January 2022, the VirtualKeyboard web API is not available in all browsers yet + * If it is unavailable, we default to assuming that the virtual keyboard is open on touch-enabled devices. + * See https://github.com/Expensify/App/issues/6767 for additional context. + * * @returns {Boolean} */ shouldAssumeVirtualKeyboardIsOpen() { From a1e29abc8cd7d057b0294332823172a4bfa9d861 Mon Sep 17 00:00:00 2001 From: AHMED Date: Mon, 24 Jan 2022 21:11:47 +0200 Subject: [PATCH 10/10] support native virtual Keyboard --- .../index.js} | 0 src/libs/virtualKeyboard/index.native.js | 33 +++++++++++++++++++ 2 files changed, 33 insertions(+) rename src/libs/{virtualKeyboard.js => virtualKeyboard/index.js} (100%) create mode 100644 src/libs/virtualKeyboard/index.native.js diff --git a/src/libs/virtualKeyboard.js b/src/libs/virtualKeyboard/index.js similarity index 100% rename from src/libs/virtualKeyboard.js rename to src/libs/virtualKeyboard/index.js diff --git a/src/libs/virtualKeyboard/index.native.js b/src/libs/virtualKeyboard/index.native.js new file mode 100644 index 000000000000..6c21a32ffcdf --- /dev/null +++ b/src/libs/virtualKeyboard/index.native.js @@ -0,0 +1,33 @@ +import {Keyboard} from 'react-native'; + +let isVirtualKeyboardOpen = false; + +Keyboard.addListener( + 'keyboardDidShow', + () => { + isVirtualKeyboardOpen = true; + }, +); + +Keyboard.addListener( + 'keyboardDidHide', + () => { + isVirtualKeyboardOpen = false; + }, +); + +/** + * Is the virtual keyboard open? + * + * Note – the web equivalent of this function may return null. + * + * @returns {Boolean} + */ +function isOpen() { + return isVirtualKeyboardOpen; +} + +export { + // eslint-disable-next-line import/prefer-default-export + isOpen, +};