From 6ed97358c07fe93ee04393fc2c58509535a208e6 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 8 Aug 2024 15:29:01 +0800 Subject: [PATCH 1/5] fix focus ready promise is resolved on modal show in strict mode --- src/components/Modal/BaseModal.tsx | 5 ++++- src/components/Modal/ModalContent.tsx | 10 ++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index a797f83b6c3b..65678d00911a 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -256,7 +256,10 @@ function BaseModal( avoidKeyboard={avoidKeyboard} customBackdrop={shouldUseCustomBackdrop ? : undefined} > - + void; + + /** Callback method fired after modal content is mounted. */ + onModalWillShow: () => void; }; -function ModalContent({children, onDismiss = () => {}}: ModalContentProps) { +function ModalContent({children, onDismiss = () => {}, onModalWillShow = () => {}}: ModalContentProps) { // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - React.useEffect(() => () => onDismiss?.(), []); + React.useEffect(() => { + onModalWillShow(); + return onDismiss; + }, []); return children; } ModalContent.displayName = 'ModalContent'; From 3e054242eebb93c616f8c96b9f680f1417b4b1ed Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 8 Aug 2024 15:29:25 +0800 Subject: [PATCH 2/5] fix initial selection --- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 4281d1ddebd3..cf5ee2e3f3cd 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -298,7 +298,7 @@ function ComposerWithSuggestions( const valueRef = useRef(value); valueRef.current = value; - const [selection, setSelection] = useState(() => ({start: 0, end: 0, positionX: 0, positionY: 0})); + const [selection, setSelection] = useState(() => ({start: value.length, end: value.length, positionX: 0, positionY: 0})); const [composerHeight, setComposerHeight] = useState(0); From c60831e25ccef061a78a792654176a4d78159f19 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 8 Aug 2024 15:29:52 +0800 Subject: [PATCH 3/5] wait until the app ready to focus on input --- src/components/Composer/index.tsx | 3 ++- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 3889c8597843..389e41f33ee8 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -19,6 +19,7 @@ import * as Browser from '@libs/Browser'; import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import * as EmojiUtils from '@libs/EmojiUtils'; import * as FileUtils from '@libs/fileDownload/FileUtils'; +import focusComposerWithDelay from '@libs/focusComposerWithDelay'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import CONST from '@src/CONST'; @@ -379,7 +380,7 @@ function Composer( return; } - textInput.current.focus(); + focusComposerWithDelay(textInput.current)(true); }); props.onFocus?.(e); diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index cf5ee2e3f3cd..5c88010cd9c9 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -591,7 +591,7 @@ function ComposerWithSuggestions( return; } - focus(false); + focus(true); }, true); }, [focus, isFocused]); From 00233f0ad503139115ab341094ada23d26b648e8 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 17 Aug 2024 22:02:15 +0800 Subject: [PATCH 4/5] suppress lint --- src/components/Modal/ModalContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Modal/ModalContent.tsx b/src/components/Modal/ModalContent.tsx index fb84d551cfb6..a5a6f49dd33f 100644 --- a/src/components/Modal/ModalContent.tsx +++ b/src/components/Modal/ModalContent.tsx @@ -17,10 +17,10 @@ type ModalContentProps = { }; function ModalContent({children, onDismiss = () => {}, onModalWillShow = () => {}}: ModalContentProps) { - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps React.useEffect(() => { onModalWillShow(); return onDismiss; + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); return children; } From bc51410a96f93c90abb1efca825890e960bd3678 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 17 Aug 2024 22:17:52 +0800 Subject: [PATCH 5/5] prettier --- src/components/Modal/ModalContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Modal/ModalContent.tsx b/src/components/Modal/ModalContent.tsx index a5a6f49dd33f..d143aef46ca6 100644 --- a/src/components/Modal/ModalContent.tsx +++ b/src/components/Modal/ModalContent.tsx @@ -20,7 +20,7 @@ function ModalContent({children, onDismiss = () => {}, onModalWillShow = () => { React.useEffect(() => { onModalWillShow(); return onDismiss; - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); return children; }