From e7e2b2f54e80868114f4c3a1570a30b10cca19d0 Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Sat, 19 Aug 2023 18:30:04 +0530 Subject: [PATCH 1/8] fix: cursor issue starting on left of text --- .../home/report/ReportActionItemMessageEdit.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 0ceffc716e34..f7e5679a4b81 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -30,6 +30,7 @@ import refPropTypes from '../../../components/refPropTypes'; import * as ComposerUtils from '../../../libs/ComposerUtils'; import * as ComposerActions from '../../../libs/actions/Composer'; import * as User from '../../../libs/actions/User'; +import * as Browser from '../../../libs/Browser'; import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback'; import getButtonState from '../../../libs/getButtonState'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; @@ -124,16 +125,18 @@ function ReportActionItemMessageEdit(props) { }, [isFocused]); useEffect(() => { - // For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus + // For mobile Safari and mobile Chrome, updating the selection prop on an unfocused input will cause it to automatically gain focus // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style), // so we need to ensure that it is only updated after focus. - setDraft((prevDraft) => { - setSelection({ - start: prevDraft.length, - end: prevDraft.length, + if (Browser.isMobileSafari() || Browser.isMobileChrome()) { + setDraft((prevDraft) => { + setSelection({ + start: prevDraft.length, + end: prevDraft.length, + }); + return prevDraft; }); - return prevDraft; - }); + } return () => { // Skip if this is not the focused message so the other edit composer stays focused. From ff21ba69afa3c05d66f8e4398dafe4ada81507b1 Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Sat, 19 Aug 2023 19:13:23 +0530 Subject: [PATCH 2/8] fix: don't run for android --- src/pages/home/report/ReportActionItemMessageEdit.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index f7e5679a4b81..9b1f011ba8d4 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -1,6 +1,6 @@ import lodashGet from 'lodash/get'; import React, {useState, useRef, useMemo, useEffect, useCallback} from 'react'; -import {InteractionManager, Keyboard, View} from 'react-native'; +import {InteractionManager, Keyboard, Platform, View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; @@ -41,6 +41,7 @@ import useReportScrollManager from '../../../hooks/useReportScrollManager'; import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction'; import focusWithDelay from '../../../libs/focusWithDelay'; import ONYXKEYS from '../../../ONYXKEYS'; +import getOperatingSystem from '../../../libs/getOperatingSystem'; const propTypes = { /** All the data of the action */ @@ -125,10 +126,10 @@ function ReportActionItemMessageEdit(props) { }, [isFocused]); useEffect(() => { - // For mobile Safari and mobile Chrome, updating the selection prop on an unfocused input will cause it to automatically gain focus + // For every platform execept Android, updating the selection prop on an unfocused input will cause it to automatically gain focus // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style), // so we need to ensure that it is only updated after focus. - if (Browser.isMobileSafari() || Browser.isMobileChrome()) { + if (getOperatingSystem() !== CONST.OS.ANDROID) { setDraft((prevDraft) => { setSelection({ start: prevDraft.length, From 37566c7f94fc56ee4ad3926a5ec2e95da8d20011 Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Sat, 19 Aug 2023 19:14:11 +0530 Subject: [PATCH 3/8] remove browser lib import --- src/pages/home/report/ReportActionItemMessageEdit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 9b1f011ba8d4..a4ce3d0a738d 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -30,7 +30,6 @@ import refPropTypes from '../../../components/refPropTypes'; import * as ComposerUtils from '../../../libs/ComposerUtils'; import * as ComposerActions from '../../../libs/actions/Composer'; import * as User from '../../../libs/actions/User'; -import * as Browser from '../../../libs/Browser'; import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback'; import getButtonState from '../../../libs/getButtonState'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; From f23c859fa49febf16654df2fe87d652b008a7891 Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Sat, 19 Aug 2023 19:14:30 +0530 Subject: [PATCH 4/8] remove platform import --- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index a4ce3d0a738d..72c5f35f2190 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -1,6 +1,6 @@ import lodashGet from 'lodash/get'; import React, {useState, useRef, useMemo, useEffect, useCallback} from 'react'; -import {InteractionManager, Keyboard, Platform, View} from 'react-native'; +import {InteractionManager, Keyboard, View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; From e7ba65357d4d9fbd7fdeb4d4bfdd68b736913b89 Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Tue, 29 Aug 2023 12:52:38 +0530 Subject: [PATCH 5/8] fixed report edit issue --- .../report/ReportActionItemMessageEdit.js | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index a418f03c1088..84920090c3da 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -40,7 +40,7 @@ import useReportScrollManager from '../../../hooks/useReportScrollManager'; import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction'; import focusWithDelay from '../../../libs/focusWithDelay'; import ONYXKEYS from '../../../ONYXKEYS'; -import getOperatingSystem from '../../../libs/getOperatingSystem'; +import * as Browser from '../../../libs/Browser'; const propTypes = { /** All the data of the action */ @@ -94,8 +94,9 @@ function ReportActionItemMessageEdit(props) { const {translate} = useLocalize(); const {isKeyboardShown} = useKeyboardState(); const {isSmallScreenWidth} = useWindowDimensions(); + const isMobileSafari = Browser.isMobileSafari(); - const [draft, setDraft] = useState(() => { + const getInitialDraft = () => { if (props.draftMessage === props.action.message[0].html) { // We only convert the report action message to markdown if the draft message is unchanged. const parser = new ExpensiMark(); @@ -103,8 +104,18 @@ function ReportActionItemMessageEdit(props) { } // We need to decode saved draft message because it's escaped before saving. return Str.htmlDecode(props.draftMessage); - }); - const [selection, setSelection] = useState({start: 0, end: 0}); + }; + + const getInitialSelection = () => { + const length = getInitialDraft().length; + if (isMobileSafari) { + return {start: 0, end: 0}; + } + return {start: length, end: length}; + }; + + const [draft, setDraft] = useState(() => getInitialDraft()); + const [selection, setSelection] = useState(getInitialSelection()); const [isFocused, setIsFocused] = useState(false); const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false); @@ -118,10 +129,10 @@ function ReportActionItemMessageEdit(props) { }, [isFocused]); useEffect(() => { - // For every platform execept Android, updating the selection prop on an unfocused input will cause it to automatically gain focus + // For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style), // so we need to ensure that it is only updated after focus. - if (getOperatingSystem() !== CONST.OS.ANDROID) { + if (isMobileSafari) { setDraft((prevDraft) => { setSelection({ start: prevDraft.length, From e2636cf4fa1044665b7d55cfd3ffaf35dce33987 Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Tue, 29 Aug 2023 13:27:32 +0530 Subject: [PATCH 6/8] fix: lint issue --- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 84920090c3da..f7cbcef0d63a 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -153,7 +153,7 @@ function ReportActionItemMessageEdit(props) { // to prevent the main composer stays hidden until we swtich to another chat. ComposerActions.setShouldShowComposeInput(true); }; - }, [props.action.reportActionID]); + }, [props.action.reportActionID, isMobileSafari]); /** * Save the draft of the comment. This debounced so that we're not ceaselessly saving your edit. Saving the draft From 8e49331f6d4b1d9f6f965f41bfe8f734f5a8d5fa Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Fri, 1 Sep 2023 01:54:21 +0530 Subject: [PATCH 7/8] calculate only when its not isMobileSafari --- src/pages/home/report/ReportActionItemMessageEdit.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index f7cbcef0d63a..5e38355540ef 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -89,12 +89,13 @@ const cancelButtonID = 'cancelButton'; const emojiButtonID = 'emojiButton'; const messageEditInput = 'messageEditInput'; +const isMobileSafari = Browser.isMobileSafari(); + function ReportActionItemMessageEdit(props) { const reportScrollManager = useReportScrollManager(); const {translate} = useLocalize(); const {isKeyboardShown} = useKeyboardState(); const {isSmallScreenWidth} = useWindowDimensions(); - const isMobileSafari = Browser.isMobileSafari(); const getInitialDraft = () => { if (props.draftMessage === props.action.message[0].html) { @@ -107,10 +108,11 @@ function ReportActionItemMessageEdit(props) { }; const getInitialSelection = () => { - const length = getInitialDraft().length; if (isMobileSafari) { return {start: 0, end: 0}; } + + const length = getInitialDraft().length; return {start: length, end: length}; }; From fa5727bc3530c55b45b81fc589c40f18a7bd0e3d Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Fri, 1 Sep 2023 02:00:52 +0530 Subject: [PATCH 8/8] removed as not needed in dependency anymore --- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 5e38355540ef..fab54846ab14 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -155,7 +155,7 @@ function ReportActionItemMessageEdit(props) { // to prevent the main composer stays hidden until we swtich to another chat. ComposerActions.setShouldShowComposeInput(true); }; - }, [props.action.reportActionID, isMobileSafari]); + }, [props.action.reportActionID]); /** * Save the draft of the comment. This debounced so that we're not ceaselessly saving your edit. Saving the draft