diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index aea0caaee36f..da019c2cd02e 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -298,7 +298,7 @@ type MenuItemBaseProps = ForwardedFSClassProps & /** The type of brick road indicator to show. */ brickRoadIndicator?: ValueOf; - /** Should render the content in HTML format */ + /** Should render the content in HTML format. A title without HTML content is rendered as plain text even when this is set. */ shouldRenderAsHTML?: boolean; /** Whether or not the text should be escaped */ @@ -752,6 +752,8 @@ function MenuItem({ return Parser.replace(helperText, {shouldEscapeText}); }, [helperText, shouldParseHelperText, shouldEscapeText]); + const shouldRenderTitleAsHTML = shouldRenderAsHTML && !!title && Parser.isHTML(title); + const processedTitle = useMemo(() => { let titleToWrap = ''; if (shouldRenderAsHTML) { @@ -1050,7 +1052,14 @@ function MenuItem({ > {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && ( - + {/* Use Text instead of RenderHTML when the title is plain text. + Titles with shouldRenderAsHTML use baseFontStyle, which differs from combinedTitleTextStyle below. + */} + {shouldRenderTitleAsHTML || shouldParseTitle ? ( + + ) : ( + {convertToLTR(Parser.htmlToText(processedTitle))} + )} )} {!shouldRenderAsHTML && !shouldParseTitle && !!title && (