diff --git a/src/pages/tasks/NewTaskDescriptionPage.tsx b/src/pages/tasks/NewTaskDescriptionPage.tsx index a5eb79497707..d227ec8c2551 100644 --- a/src/pages/tasks/NewTaskDescriptionPage.tsx +++ b/src/pages/tasks/NewTaskDescriptionPage.tsx @@ -1,6 +1,6 @@ import type {StackScreenProps} from '@react-navigation/stack'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; -import React from 'react'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -38,6 +38,7 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {inputCallbackRef} = useAutoFocusInput(); + const defaultDescriptionValue = useMemo(() => parser.htmlToMarkdown(parser.replace(task?.description ?? '')), [task?.description]); const onSubmit = (values: FormOnyxValues) => { TaskActions.setDescriptionValue(values.taskDescription); @@ -77,7 +78,7 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) { parser.htmlToMarkdown(parser.replace(taskDescription)), [taskDescription]); useEffect(() => { setTaskTitle(task?.title ?? ''); setTaskDescription(parser.htmlToMarkdown(parser.replace(task?.description ?? ''))); - }, [task]); + }, [task?.description, task?.title]); const validate = (values: FormOnyxValues): FormInputErrors => { const errors = {}; @@ -114,7 +115,7 @@ function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) { autoGrowHeight shouldSubmitForm containerStyles={styles.autoGrowHeightMultilineInput} - defaultValue={parser.htmlToMarkdown(parser.replace(taskDescription))} + defaultValue={defaultDescriptionValue} value={taskDescription} onValueChange={setTaskDescription} /> diff --git a/src/pages/tasks/TaskDescriptionPage.tsx b/src/pages/tasks/TaskDescriptionPage.tsx index e08d6380bb18..c5badbf1d757 100644 --- a/src/pages/tasks/TaskDescriptionPage.tsx +++ b/src/pages/tasks/TaskDescriptionPage.tsx @@ -1,6 +1,6 @@ import {useFocusEffect} from '@react-navigation/native'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; -import React, {useCallback, useRef} from 'react'; +import React, {useCallback, useMemo, useRef} from 'react'; import {View} from 'react-native'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FormProvider from '@components/Form/FormProvider'; @@ -70,6 +70,7 @@ function TaskDescriptionPage({report, currentUserPersonalDetails}: TaskDescripti const isOpen = ReportUtils.isOpenTaskReport(report); const canModifyTask = Task.canModifyTask(report, currentUserPersonalDetails.accountID); const isTaskNonEditable = ReportUtils.isTaskReport(report) && (!canModifyTask || !isOpen); + const defaultDescriptionValue = useMemo(() => parser.htmlToMarkdown(parser.replace(report?.description ?? '') || ''), [report?.description]); useFocusEffect( useCallback(() => { @@ -111,7 +112,7 @@ function TaskDescriptionPage({report, currentUserPersonalDetails}: TaskDescripti name={INPUT_IDS.DESCRIPTION} label={translate('newTaskPage.descriptionOptional')} accessibilityLabel={translate('newTaskPage.descriptionOptional')} - defaultValue={parser.htmlToMarkdown((report && parser.replace(report?.description ?? '')) || '')} + defaultValue={defaultDescriptionValue} ref={(element: AnimatedTextInputRef) => { if (!element) { return;