From 3bea1b5bd9ba5c5ba161a8c30c5e6ec6f38bcd30 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 27 Nov 2023 15:01:30 +0700 Subject: [PATCH 1/6] consistent key press focus logic between composer and emoji picker --- .../EmojiPicker/EmojiPickerMenu/index.js | 3 ++- src/libs/ReportUtils.js | 9 +++++++++ .../ComposerWithSuggestions.js | 17 ++++------------- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 0ee12579733d..7a2a52935c7a 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -18,6 +18,7 @@ import compose from '@libs/compose'; import * as EmojiUtils from '@libs/EmojiUtils'; import getOperatingSystem from '@libs/getOperatingSystem'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; +import * as ReportUtils from '@libs/ReportUtils'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; import * as User from '@userActions/User'; @@ -316,7 +317,7 @@ function EmojiPickerMenu(props) { // Enable keyboard movement if tab or enter is pressed or if shift is pressed while the input // is not focused, so that the navigation and tab cycling can be done using the keyboard without // interfering with the input behaviour. - if (keyBoardEvent.key === 'Tab' || keyBoardEvent.key === 'Enter' || (keyBoardEvent.key === 'Shift' && searchInputRef.current && !searchInputRef.current.isFocused())) { + if (!ReportUtils.shouldAutoFocusOnKeyPress(keyBoardEvent, searchInputRef)) { setIsUsingKeyboardMovement(true); return; } diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 2e91a93af7e1..d1a242970c91 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -4367,6 +4367,14 @@ function shouldDisableWelcomeMessage(report, policy) { return isMoneyRequestReport(report) || isArchivedRoom(report) || !isChatRoom(report) || isChatThread(report) || !PolicyUtils.isPolicyAdmin(policy); } +function shouldAutoFocusOnKeyPress(event, inputRef) { + if (event.key === 'Tab' || event.key === 'Enter' || (event.key === 'Shift' && inputRef.current && !inputRef.current.isFocused())) { + return false; + } + + return true; +} + export { getReportParticipantsTitle, isReportMessageAttachment, @@ -4533,4 +4541,5 @@ export { getRoom, shouldDisableWelcomeMessage, canEditWriteCapability, + shouldAutoFocusOnKeyPress, }; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 663db82a6067..881c92d08c9e 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -436,18 +436,7 @@ function ComposerWithSuggestions({ return; } - // If the key pressed is non-character keys like Enter, Shift, ... do not focus - if (e.key.length > 1) { - return; - } - - // If a key is pressed in combination with Meta, Control or Alt do not focus - if (e.metaKey || e.ctrlKey || e.altKey) { - return; - } - - // If the space key is pressed, do not focus - if (e.code === 'Space') { + if (!ReportUtils.shouldAutoFocusOnKeyPress(e, textInputRef)) { return; } @@ -457,7 +446,9 @@ function ComposerWithSuggestions({ } focus(); - replaceSelectionWithText(e.key, false); + if (e.key.length === 1) { + replaceSelectionWithText(e.key, false); + } }, [checkComposerVisibility, focus, replaceSelectionWithText], ); From 1efd85dbce57047006446d39e4ea097c35b22fd3 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 29 Nov 2023 16:16:27 +0700 Subject: [PATCH 2/6] fix ts check --- src/libs/ReportUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index cf7f072208fd..af80e6add9cc 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -4216,7 +4216,7 @@ function shouldDisableWelcomeMessage(report: OnyxEntry, policy: OnyxEntr return isMoneyRequestReport(report) || isArchivedRoom(report) || !isChatRoom(report) || isChatThread(report) || !PolicyUtils.isPolicyAdmin(policy); } -function shouldAutoFocusOnKeyPress(event, inputRef) { +function shouldAutoFocusOnKeyPress(event: any, inputRef: any): boolean { if (event.key === 'Tab' || event.key === 'Enter' || (event.key === 'Shift' && inputRef.current && !inputRef.current.isFocused())) { return false; } From bddf958e23ff475a053d86411944c18641c085cb Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 29 Nov 2023 16:28:35 +0700 Subject: [PATCH 3/6] fix lint --- src/libs/ReportUtils.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index af80e6add9cc..1d39e1c39aea 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -5,6 +5,8 @@ import lodashEscape from 'lodash/escape'; import lodashFindLastIndex from 'lodash/findLastIndex'; import lodashIntersection from 'lodash/intersection'; import lodashIsEqual from 'lodash/isEqual'; +import React from 'react'; +import {TextInput} from 'react-native'; import Onyx, {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx'; import {SvgProps} from 'react-native-svg'; import {ValueOf} from 'type-fest'; @@ -4216,7 +4218,7 @@ function shouldDisableWelcomeMessage(report: OnyxEntry, policy: OnyxEntr return isMoneyRequestReport(report) || isArchivedRoom(report) || !isChatRoom(report) || isChatThread(report) || !PolicyUtils.isPolicyAdmin(policy); } -function shouldAutoFocusOnKeyPress(event: any, inputRef: any): boolean { +function shouldAutoFocusOnKeyPress(event: KeyboardEvent, inputRef: React.RefObject): boolean { if (event.key === 'Tab' || event.key === 'Enter' || (event.key === 'Shift' && inputRef.current && !inputRef.current.isFocused())) { return false; } From cb738e9b655d58f9b40469741abce9109ce9ecf9 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 29 Nov 2023 19:30:39 +0700 Subject: [PATCH 4/6] not focus with space key --- src/libs/ReportUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 1d39e1c39aea..35295dfeecb7 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -4219,7 +4219,7 @@ function shouldDisableWelcomeMessage(report: OnyxEntry, policy: OnyxEntr } function shouldAutoFocusOnKeyPress(event: KeyboardEvent, inputRef: React.RefObject): boolean { - if (event.key === 'Tab' || event.key === 'Enter' || (event.key === 'Shift' && inputRef.current && !inputRef.current.isFocused())) { + if (event.key === 'Tab' || event.key === 'Enter' || e.code === 'Space' || (event.key === 'Shift' && inputRef.current && !inputRef.current.isFocused())) { return false; } From d0f3f30f7ea886acd24d5317f2289cb5fa50fe85 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 29 Nov 2023 19:39:16 +0700 Subject: [PATCH 5/6] fix ts --- src/libs/ReportUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 35295dfeecb7..da366b865d3e 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -4219,7 +4219,7 @@ function shouldDisableWelcomeMessage(report: OnyxEntry, policy: OnyxEntr } function shouldAutoFocusOnKeyPress(event: KeyboardEvent, inputRef: React.RefObject): boolean { - if (event.key === 'Tab' || event.key === 'Enter' || e.code === 'Space' || (event.key === 'Shift' && inputRef.current && !inputRef.current.isFocused())) { + if (event.key === 'Tab' || event.key === 'Enter' || event.code === 'Space' || (event.key === 'Shift' && inputRef.current && !inputRef.current.isFocused())) { return false; } From 3d4bd06a585cd3b02fbaf5e42da9f951a225f9f9 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 5 Dec 2023 19:40:49 +0700 Subject: [PATCH 6/6] remove unnecessary condition --- .../ComposerWithSuggestions/ComposerWithSuggestions.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 16eec7b6b996..a3fdc7f574f6 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -437,9 +437,7 @@ function ComposerWithSuggestions({ } focus(); - if (e.key.length === 1) { - replaceSelectionWithText(e.key, false); - } + replaceSelectionWithText(e.key, false); }, [checkComposerVisibility, focus, replaceSelectionWithText], );