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

Jump to bottom

Don't focus when ref composer is unmounted #25981

Merged
merged 10 commits into from
Aug 28, 2023
Merged

Don't focus when ref composer is unmounted #25981

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c9b0ebc
don't focus when ref composer is unmounted
rushatgabhane Aug 25, 2023
9a66b0c
don't focus when ref composer is unmounted
rushatgabhane Aug 25, 2023
10f033b
Merge branch 'main' into fix-crash
rushatgabhane Aug 27, 2023
fd7fd0f
lint
rushatgabhane Aug 28, 2023
8433620
use optional chaining
rushatgabhane Aug 28, 2023
345485d
Revert "use optional chaining"
rushatgabhane Aug 28, 2023
d41c300
use focus()
rushatgabhane Aug 28, 2023
5fea3ba
fix lint
rushatgabhane Aug 28, 2023
165d635
prettier
rushatgabhane Aug 28, 2023
ca245d1
define func before it's used
rushatgabhane Aug 28, 2023
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
11 changes: 9 additions & 2 deletions src/pages/home/report/ReportActionCompose/ReportActionCompose.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,12 +178,19 @@ function ReportActionCompose({
return translate('reportActionCompose.writeSomething');
}, [report, blockedFromConcierge, translate, conciergePlaceholderRandomIndex]);

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

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

Expand Down Expand Up @@ -403,7 +410,7 @@ function ReportActionCompose({
{DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : (
<EmojiPickerButton
isDisabled={isBlockedFromConcierge || disabled}
onModalHide={() => composerRef.current.focus(true)}
onModalHide={focus}
Copy link
Member Author

@rushatgabhane rushatgabhane Aug 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

@mountiny this might be a noob question, but are these both equivalent?

  1. onModalHide={focus}
  2. onModalHide={() => focus()}

Copy link
Contributor

Choose a reason for hiding this comment

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

I believe they are equivalent. The first option is passing the function directly as a reference so in theory its slightly more efficient because the second option everytime creates a new inline function that calls the focus function

onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)}
emojiPickerID={report.reportID}
/>
Expand Down
Loading