From fa2b75e63c4f90204340377246986b03ac760a78 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 21 Aug 2024 04:47:48 +0530 Subject: [PATCH 1/3] fix: clicking enter on emoji selector for status results in leaving status pane. Signed-off-by: krishna2323 --- .../EmojiPicker/EmojiPickerMenu/index.tsx | 42 ++++++++++++------- .../Profile/CustomStatus/StatusPage.tsx | 6 ++- 2 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx index 5a59585ad72..92c35d7c768 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx @@ -10,6 +10,7 @@ import TextInput from '@components/TextInput'; import isTextInputFocused from '@components/TextInput/BaseTextInput/isTextInputFocused'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; +import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSingleExecution from '@hooks/useSingleExecution'; @@ -141,21 +142,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r return; } - // Select the currently highlighted emoji if enter is pressed if (!isEnterWhileComposition(keyBoardEvent) && keyBoardEvent.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { - let indexToSelect = focusedIndex; - if (highlightFirstEmoji) { - indexToSelect = 0; - } - - const item = filteredEmojis[indexToSelect]; - if (!item) { - return; - } - if ('types' in item || 'name' in item) { - const emoji = typeof preferredSkinTone === 'number' && item?.types?.[preferredSkinTone] ? item?.types?.[preferredSkinTone] : item.code; - onEmojiSelected(emoji, item); - } // On web, avoid this Enter default input action; otherwise, it will add a new line in the subsequently focused composer. keyBoardEvent.preventDefault(); // On mWeb, avoid propagating this Enter keystroke to Pressable child component; otherwise, it will trigger the onEmojiSelected callback again. @@ -175,7 +162,32 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r searchInputRef.current.focus(); } }, - [filteredEmojis, focusedIndex, highlightFirstEmoji, isFocused, onEmojiSelected, preferredSkinTone], + [isFocused], + ); + + useKeyboardShortcut( + CONST.KEYBOARD_SHORTCUTS.ENTER, + (keyBoardEvent) => { + if (!(keyBoardEvent instanceof KeyboardEvent) || isEnterWhileComposition(keyBoardEvent) || keyBoardEvent.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { + return; + } + + // Select the currently highlighted emoji if enter is pressed + let indexToSelect = focusedIndex; + if (highlightFirstEmoji) { + indexToSelect = 0; + } + + const item = filteredEmojis[indexToSelect]; + if (!item) { + return; + } + if ('types' in item || 'name' in item) { + const emoji = typeof preferredSkinTone === 'number' && item?.types?.[preferredSkinTone] ? item?.types?.[preferredSkinTone] : item.code; + onEmojiSelected(emoji, item); + } + }, + {shouldPreventDefault: true, shouldStopPropagation: true}, ); /** diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx index 6532bf28ac4..26c2a909213 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx +++ b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx @@ -151,7 +151,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps) return {}; }, [brickRoadIndicator]); - const {inputCallbackRef} = useAutoFocusInput(); + const {inputCallbackRef, inputRef} = useAutoFocusInput(); return ( {}} + onModalHide={() => { + inputRef.current?.focus(); + }} // eslint-disable-next-line @typescript-eslint/no-unused-vars onInputChange={(emoji: string): void => {}} /> From 3102c713039083e274a2cf7eb53b987120429223 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 23 Aug 2024 17:44:06 +0530 Subject: [PATCH 2/3] fix: emoji highlighted when opening status emoji picker. Signed-off-by: krishna2323 --- src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx | 5 +++-- src/pages/settings/Profile/CustomStatus/StatusPage.tsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx b/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx index e0f97d63738..d402b5e51c9 100644 --- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx +++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx @@ -23,13 +23,14 @@ type EmojiPickerButtonDropdownProps = { onModalHide: EmojiPickerAction.OnModalHideValue; onInputChange: (emoji: string) => void; value?: string; + shouldPassActiveEmoji?: boolean; disabled?: boolean; style: StyleProp; }; function EmojiPickerButtonDropdown( // eslint-disable-next-line @typescript-eslint/no-unused-vars - {isDisabled = false, onModalHide, onInputChange, value, disabled, style, ...otherProps}: EmojiPickerButtonDropdownProps, + {isDisabled = false, onModalHide, onInputChange, value, disabled, style, shouldPassActiveEmoji = true, ...otherProps}: EmojiPickerButtonDropdownProps, // eslint-disable-next-line @typescript-eslint/no-unused-vars ref: ForwardedRef, ) { @@ -56,7 +57,7 @@ function EmojiPickerButtonDropdown( }, () => {}, undefined, - value, + shouldPassActiveEmoji ? value : undefined, ); }; diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx index 26c2a909213..7e4f6838b6d 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx +++ b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx @@ -189,6 +189,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps) onModalHide={() => { inputRef.current?.focus(); }} + shouldPassActiveEmoji={false} // eslint-disable-next-line @typescript-eslint/no-unused-vars onInputChange={(emoji: string): void => {}} /> From 7c8e35e138e23e8ec5dc146b9dda477c629b215a Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 23 Aug 2024 17:46:22 +0530 Subject: [PATCH 3/3] revert changes. Signed-off-by: krishna2323 --- src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx | 5 ++--- src/pages/settings/Profile/CustomStatus/StatusPage.tsx | 1 - 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx b/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx index d402b5e51c9..e0f97d63738 100644 --- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx +++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx @@ -23,14 +23,13 @@ type EmojiPickerButtonDropdownProps = { onModalHide: EmojiPickerAction.OnModalHideValue; onInputChange: (emoji: string) => void; value?: string; - shouldPassActiveEmoji?: boolean; disabled?: boolean; style: StyleProp; }; function EmojiPickerButtonDropdown( // eslint-disable-next-line @typescript-eslint/no-unused-vars - {isDisabled = false, onModalHide, onInputChange, value, disabled, style, shouldPassActiveEmoji = true, ...otherProps}: EmojiPickerButtonDropdownProps, + {isDisabled = false, onModalHide, onInputChange, value, disabled, style, ...otherProps}: EmojiPickerButtonDropdownProps, // eslint-disable-next-line @typescript-eslint/no-unused-vars ref: ForwardedRef, ) { @@ -57,7 +56,7 @@ function EmojiPickerButtonDropdown( }, () => {}, undefined, - shouldPassActiveEmoji ? value : undefined, + value, ); }; diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx index 7e4f6838b6d..26c2a909213 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx +++ b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx @@ -189,7 +189,6 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps) onModalHide={() => { inputRef.current?.focus(); }} - shouldPassActiveEmoji={false} // eslint-disable-next-line @typescript-eslint/no-unused-vars onInputChange={(emoji: string): void => {}} />