Skip to content

fix: clicking enter on emoji selector for status results in leaving status pane. #47761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
carlosmiceli merged 5 commits into from
Aug 28, 2024
Merged

fix: clicking enter on emoji selector for status results in leaving status pane. #47761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fa2b75e
fix: clicking enter on emoji selector for status results in leaving s…
Krishna2323 Aug 20, 2024
dc54e4f
Merge branch 'Expensify:main' into krishna2323/issue/47272
Krishna2323 Aug 23, 2024
3102c71
fix: emoji highlighted when opening status emoji picker.
Krishna2323 Aug 23, 2024
7c8e35e
revert changes.
Krishna2323 Aug 23, 2024
052cbf4
Merge branch 'Expensify:main' into krishna2323/issue/47272
Krishna2323 Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 27 additions & 15 deletions src/components/EmojiPicker/EmojiPickerMenu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();

@ahmedGaber93 ahmedGaber93 Nov 6, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving Enter login to useKeyboardShortcut and Keeping prevent default and stop propagation here cause this issue #50561, and we fixed it here #50971

// On mWeb, avoid propagating this Enter keystroke to Pressable child component; otherwise, it will trigger the onEmojiSelected callback again.
Expand All @@ -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},
);

/**
Expand Down
6 changes: 4 additions & 2 deletions src/pages/settings/Profile/CustomStatus/StatusPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps)
return {};
}, [brickRoadIndicator]);

const {inputCallbackRef} = useAutoFocusInput();
const {inputCallbackRef, inputRef} = useAutoFocusInput();

return (
<ScreenWrapper
Expand Down Expand Up @@ -186,7 +186,9 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps)
role={CONST.ROLE.PRESENTATION}
defaultValue={defaultEmoji}
style={styles.mb3}
onModalHide={() => {}}
onModalHide={() => {
inputRef.current?.focus();
}}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onInputChange={(emoji: string): void => {}}
/>
Expand Down