From 81882002eee55586afc0b79c4a903f496c91f1e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Santos?= Date: Wed, 9 Nov 2022 15:15:34 +0000 Subject: [PATCH 1/2] Fix #12325 - In ReportActionItemMessageEdit.js change updateDraft's setState - In ReportActionCompose.js change updateComment's setState - In both changes, verify if the input has been manipulated. If yes, mantain cursor position from previous state --- src/pages/home/report/ReportActionCompose.js | 18 +++++++++++++++--- .../home/report/ReportActionItemMessageEdit.js | 15 ++++++++++++++- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index ab5aa6fba10..ced99102587 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -383,9 +383,21 @@ class ReportActionCompose extends React.Component { */ updateComment(comment, shouldDebounceSaveComment) { const newComment = EmojiUtils.replaceEmojis(comment); - this.setState({ - isCommentEmpty: !!newComment.match(/^(\s|`)*$/), - value: newComment, + this.setState((prevState) => { + let newState = { + isCommentEmpty: !!newComment.match(/^(\s|`)*$/), + value: newComment + } + + if(comment !== newComment) { + const remainder = prevState.value.slice(prevState.selection.end).length + newState.selection = { + start: newComment.length - remainder, + end: newComment.length - remainder + } + } + + return newState }); // Indicate that draft has been created. diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 9597eaf5244..d2eda755eb5 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -102,7 +102,20 @@ class ReportActionItemMessageEdit extends React.Component { */ updateDraft(draft) { const newDraft = EmojiUtils.replaceEmojis(draft); - this.setState({draft: newDraft}); + + this.setState((prevState) => { + let newState = {draft: newDraft} + + if(draft !== newDraft) { + const remainder = prevState.draft.slice(prevState.selection.end).length + newState.selection = { + start: newDraft.length - remainder, + end: newDraft.length - remainder + } + } + + return newState + }); // This component is rendered only when draft is set to a non-empty string. In order to prevent component // unmount when user deletes content of textarea, we set previous message instead of empty string. From 0a9087cb597f4598cabe63f1fa728c2b4ef1d325 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Santos?= Date: Mon, 14 Nov 2022 01:20:26 +0000 Subject: [PATCH 2/2] Fix formatting. npx eslint no errors --- src/pages/home/report/ReportActionCompose.js | 20 +++++++++---------- .../report/ReportActionItemMessageEdit.js | 17 +++++++--------- 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index ced99102587..39e05cded83 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -384,20 +384,18 @@ class ReportActionCompose extends React.Component { updateComment(comment, shouldDebounceSaveComment) { const newComment = EmojiUtils.replaceEmojis(comment); this.setState((prevState) => { - let newState = { + const newState = { isCommentEmpty: !!newComment.match(/^(\s|`)*$/), - value: newComment - } - - if(comment !== newComment) { - const remainder = prevState.value.slice(prevState.selection.end).length - newState.selection = { + value: newComment, + }; + if (comment !== newComment) { + const remainder = prevState.value.slice(prevState.selection.end).length; + newState.selection = { start: newComment.length - remainder, - end: newComment.length - remainder - } + end: newComment.length - remainder, + }; } - - return newState + return newState; }); // Indicate that draft has been created. diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index d2eda755eb5..2f7fbc29db3 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -102,19 +102,16 @@ class ReportActionItemMessageEdit extends React.Component { */ updateDraft(draft) { const newDraft = EmojiUtils.replaceEmojis(draft); - this.setState((prevState) => { - let newState = {draft: newDraft} - - if(draft !== newDraft) { - const remainder = prevState.draft.slice(prevState.selection.end).length - newState.selection = { + const newState = {draft: newDraft}; + if (draft !== newDraft) { + const remainder = prevState.draft.slice(prevState.selection.end).length; + newState.selection = { start: newDraft.length - remainder, - end: newDraft.length - remainder - } + end: newDraft.length - remainder, + }; } - - return newState + return newState; }); // This component is rendered only when draft is set to a non-empty string. In order to prevent component