From 8ddec2d7648806d9260ab4d4fc3cf90fef885422 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 09:32:03 +0530
Subject: [PATCH 1/2] create common render for html and fix wrapping of title

---
 src/components/MenuItem.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index c8906889612f..403e476e197a 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {useEffect} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Text from './Text';
@@ -119,6 +119,18 @@ const MenuItem = React.forwardRef((props, ref) => {
         titleRef.current = props.title;
     }, [props.title, props.shouldParseTitle]);
 
+    const getProcessedTitle = useMemo(() => {
+        if (props.shouldRenderAsHTML) {
+            return convertToLTR(props.title);
+        }
+
+        if (props.shouldParseTitle) {
+            return html;
+        }
+
+        return '';
+    }, [props.title, props.shouldRenderAsHTML, props.shouldParseTitle, html]);
+
     return (
         <Hoverable>
             {(isHovered) => (
@@ -235,10 +247,11 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && <RenderHTML html={convertToLTR(props.title)} />}
-
-                                            {Boolean(props.shouldParseTitle) && Boolean(html.length) && !props.shouldRenderAsHTML && <RenderHTML html={`<comment>${html}</comment>`} />}
-
+                                            {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
+                                                <View style={styles.chatItemMessage}>
+                                                    <RenderHTML html={getProcessedTitle} />
+                                                </View>
+                                            )}
                                             {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
                                                 <Text
                                                     style={titleTextStyle}
@@ -248,7 +261,6 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                     {convertToLTR(props.title)}
                                                 </Text>
                                             )}
-
                                             {Boolean(props.shouldShowTitleIcon) && (
                                                 <View style={[styles.ml2]}>
                                                     <Icon

From 33934c528e9a566a65d2a04c4b7af805ff396eb5 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 11:20:26 +0530
Subject: [PATCH 2/2] fixed wrapping for native apps

---
 src/components/MenuItem.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 403e476e197a..bb4eeb7a18ac 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -25,6 +25,10 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import RenderHTML from './RenderHTML';
+import getPlatform from '../libs/getPlatform';
+
+const platform = getPlatform();
+const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
 
 const propTypes = menuItemPropTypes;
 
@@ -247,11 +251,15 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
-                                                <View style={styles.chatItemMessage}>
+                                            {Boolean(props.title) &&
+                                                (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) &&
+                                                (isNative ? (
                                                     <RenderHTML html={getProcessedTitle} />
-                                                </View>
-                                            )}
+                                                ) : (
+                                                    <View style={styles.chatItemMessage}>
+                                                        <RenderHTML html={getProcessedTitle} />
+                                                    </View>
+                                                ))}
                                             {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
                                                 <Text
                                                     style={titleTextStyle}