Skip to content
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

Do not focus input after other interactions #48415

Merged
merged 18 commits into from
Sep 27, 2024
Merged

Do not focus input after other interactions #48415

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c337d6f
remove focusing durty
rezkiy37 Sep 2, 2024
986becc
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 3, 2024
6ff977c
clear redundant code
rezkiy37 Sep 3, 2024
29bd065
do not focus on web
rezkiy37 Sep 3, 2024
c14d687
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 4, 2024
64fbcd7
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 9, 2024
89366c6
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 16, 2024
3c4b392
refocus when RHP closed
rezkiy37 Sep 16, 2024
00ce01f
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 16, 2024
c8c7f30
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 17, 2024
110c693
focus after emojis
rezkiy37 Sep 18, 2024
0fd7fb4
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 18, 2024
138290a
refactor AttachmentPickerWithMenuItems
rezkiy37 Sep 18, 2024
522277c
refactor ReportActionCompose
rezkiy37 Sep 18, 2024
be472cd
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 24, 2024
a14bd8f
Refactor willBlurTextInputOnTapOutside to use getIsNarrowLayout
rezkiy37 Sep 25, 2024
291050a
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 26, 2024
3555591
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fix…
rezkiy37 Sep 27, 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
4 changes: 2 additions & 2 deletions src/components/EmojiPicker/EmojiPickerButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ type EmojiPickerButtonProps = {
/** Emoji popup anchor offset shift vertical */
shiftVertical?: number;

onModalHide: EmojiPickerAction.OnModalHideValue;
onModalHide?: EmojiPickerAction.OnModalHideValue;

onEmojiSelected: EmojiPickerAction.OnEmojiSelected;
};

function EmojiPickerButton({isDisabled = false, id = '', emojiPickerID = '', shiftVertical = 0, onModalHide, onEmojiSelected}: EmojiPickerButtonProps) {
function EmojiPickerButton({isDisabled = false, id = '', emojiPickerID = '', shiftVertical = 0, onModalHide = () => {}, onEmojiSelected}: EmojiPickerButtonProps) {
Copy link
Contributor

Choose a reason for hiding this comment

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

After selecting an emoji, we won't focus back the composer. TBH, I'm feeling a bit disquiet about changing this.

keyboard-dismiss-after-select-emoji.mov

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It is also a part of the scope of fixing. From my point of view, it is not a problem and it is good as well. But let's decide #48415 (comment) first.

const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const emojiPopoverAnchor = useRef(null);
Expand Down
6 changes: 3 additions & 3 deletions src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,10 @@ type AttachmentPickerWithMenuItemsProps = AttachmentPickerWithMenuItemsOnyxProps
onTriggerAttachmentPicker: () => void;

/** Called when cancelling the attachment picker */
onCanceledAttachmentPicker: () => void;
onCanceledAttachmentPicker?: () => void;

/** Called when the menu with the items is closed after it was open */
onMenuClosed: () => void;
onMenuClosed?: () => void;

/** Called when the add action button is pressed */
onAddActionPressed: () => void;
Expand Down Expand Up @@ -187,7 +187,7 @@ function AttachmentPickerWithMenuItems({

const onPopoverMenuClose = () => {
setMenuVisibility(false);
onMenuClosed();
onMenuClosed?.();
};

const prevIsFocused = usePrevious(isFocused);
Expand Down
28 changes: 1 addition & 27 deletions src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,22 +233,8 @@ function ReportActionCompose({
return translate('reportActionCompose.writeSomething');
}, [includesConcierge, translate, userBlockedFromConcierge, conciergePlaceholderRandomIndex]);

const focus = () => {
if (composerRef.current === null) {
return;
}
composerRef.current?.focus(true);
};

const isKeyboardVisibleWhenShowingModalRef = useRef(false);
const isNextModalWillOpenRef = useRef(false);
const restoreKeyboardState = useCallback(() => {
if (!isKeyboardVisibleWhenShowingModalRef.current || isNextModalWillOpenRef.current) {
return;
}
focus();
isKeyboardVisibleWhenShowingModalRef.current = false;
}, []);

const containerRef = useRef<View>(null);
const measureContainer = useCallback(
Expand Down Expand Up @@ -298,8 +284,7 @@ function ReportActionCompose({
const onAttachmentPreviewClose = useCallback(() => {
updateShouldShowSuggestionMenuToFalse();
setIsAttachmentPreviewActive(false);
restoreKeyboardState();
}, [updateShouldShowSuggestionMenuToFalse, restoreKeyboardState]);
}, [updateShouldShowSuggestionMenuToFalse]);

/**
* Add a new comment to this chat
Expand Down Expand Up @@ -490,11 +475,6 @@ function ReportActionCompose({
isMenuVisible={isMenuVisible}
onTriggerAttachmentPicker={onTriggerAttachmentPicker}
raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
onCanceledAttachmentPicker={() => {
isNextModalWillOpenRef.current = false;
restoreKeyboardState();
}}
onMenuClosed={restoreKeyboardState}
onAddActionPressed={onAddActionPressed}
onItemSelected={onItemSelected}
actionButtonRef={actionButtonRef}
Expand Down Expand Up @@ -559,12 +539,6 @@ function ReportActionCompose({
{DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : (
<EmojiPickerButton
isDisabled={isBlockedFromConcierge || disabled}
onModalHide={(isNavigating) => {
if (isNavigating) {
return;
}
focus();
}}
rezkiy37 marked this conversation as resolved.
Show resolved Hide resolved
onEmojiSelected={(...args) => composerRef.current?.replaceSelectionWithText(...args)}
emojiPickerID={report?.reportID}
shiftVertical={emojiShiftVertical}
Expand Down
Loading