From 5db1cbb219216b4eedb2667668c9c0fe63b32402 Mon Sep 17 00:00:00 2001 From: "Bernhard Owen Josephus (via MelvinBot)" Date: Sat, 27 Jun 2026 03:35:37 +0000 Subject: [PATCH 1/2] Fix dependent tag second-level row stuck faded by always applying highlight style Co-authored-by: Bernhard Owen Josephus --- ...ighlightableMenuItemWithTopDescription.tsx | 34 +++++++++++++++++++ src/components/MenuItemWithTopDescription.tsx | 17 +--------- .../sections/TagFields.tsx | 4 +-- .../ReportActionItem/MoneyRequestView.tsx | 3 +- src/pages/iou/SplitExpenseEditPage.tsx | 3 +- 5 files changed, 41 insertions(+), 20 deletions(-) create mode 100644 src/components/HighlightableMenuItemWithTopDescription.tsx diff --git a/src/components/HighlightableMenuItemWithTopDescription.tsx b/src/components/HighlightableMenuItemWithTopDescription.tsx new file mode 100644 index 000000000000..fd6ffbf37ae1 --- /dev/null +++ b/src/components/HighlightableMenuItemWithTopDescription.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; +import useTheme from '@hooks/useTheme'; +import MenuItem from './MenuItem'; +import type {MenuItemProps} from './MenuItem'; + +type HighlightableMenuItemWithTopDescriptionProps = MenuItemProps & { + /** Should the menu item be highlighted? */ + highlighted?: boolean; +}; + +function HighlightableMenuItemWithTopDescription({highlighted, outerWrapperStyle, ref, ...props}: HighlightableMenuItemWithTopDescriptionProps) { + const theme = useTheme(); + const animatedHighlightStyle = useAnimatedHighlightStyle({ + shouldHighlight: highlighted ?? false, + highlightColor: theme.messageHighlightBG, + itemEnterDelay: 0, + }); + + return ( + + ); +} + +export default HighlightableMenuItemWithTopDescription; diff --git a/src/components/MenuItemWithTopDescription.tsx b/src/components/MenuItemWithTopDescription.tsx index 4f59d1fda285..8131333e0030 100644 --- a/src/components/MenuItemWithTopDescription.tsx +++ b/src/components/MenuItemWithTopDescription.tsx @@ -1,29 +1,14 @@ import React from 'react'; -import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; -import useTheme from '@hooks/useTheme'; import MenuItem from './MenuItem'; import type {MenuItemProps} from './MenuItem'; -type MenuItemWithTopDescriptionProps = MenuItemProps & { - /** Should the menu item be highlighted? */ - highlighted?: boolean; -}; - -function MenuItemWithTopDescription({highlighted, outerWrapperStyle, ref, ...props}: MenuItemWithTopDescriptionProps) { - const theme = useTheme(); - const highlightedOuterWrapperStyle = useAnimatedHighlightStyle({ - shouldHighlight: highlighted ?? false, - highlightColor: theme.messageHighlightBG, - itemEnterDelay: 0, - }); - +function MenuItemWithTopDescription({ref, ...props}: MenuItemProps) { return ( ); } diff --git a/src/components/MoneyRequestConfirmationList/sections/TagFields.tsx b/src/components/MoneyRequestConfirmationList/sections/TagFields.tsx index fb8f930e1bbd..4d4ae28927fc 100644 --- a/src/components/MoneyRequestConfirmationList/sections/TagFields.tsx +++ b/src/components/MoneyRequestConfirmationList/sections/TagFields.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type {ValueOf} from 'type-fest'; -import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import HighlightableMenuItemWithTopDescription from '@components/HighlightableMenuItemWithTopDescription'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; @@ -53,7 +53,7 @@ function TagFields({ const displayedTag = tagDisplay ?? ''; return ( - - previousTagLength} description={name ?? translate('common.tag')} title={tagForDisplay} diff --git a/src/pages/iou/SplitExpenseEditPage.tsx b/src/pages/iou/SplitExpenseEditPage.tsx index f9fa600f70ee..0c0c754f5a96 100644 --- a/src/pages/iou/SplitExpenseEditPage.tsx +++ b/src/pages/iou/SplitExpenseEditPage.tsx @@ -5,6 +5,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView import Button from '@components/Button'; import FixedFooter from '@components/FixedFooter'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import HighlightableMenuItemWithTopDescription from '@components/HighlightableMenuItemWithTopDescription'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; @@ -377,7 +378,7 @@ function SplitExpenseEditPage({route}: SplitExpensePageProps) { } return ( - Date: Sun, 28 Jun 2026 15:50:02 +0000 Subject: [PATCH 2/2] Render MenuItemWithTopDescription and drop redundant comment Co-authored-by: Bernhard Owen Josephus --- .../HighlightableMenuItemWithTopDescription.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/HighlightableMenuItemWithTopDescription.tsx b/src/components/HighlightableMenuItemWithTopDescription.tsx index fd6ffbf37ae1..6266048d1c6c 100644 --- a/src/components/HighlightableMenuItemWithTopDescription.tsx +++ b/src/components/HighlightableMenuItemWithTopDescription.tsx @@ -1,8 +1,8 @@ import React from 'react'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useTheme from '@hooks/useTheme'; -import MenuItem from './MenuItem'; import type {MenuItemProps} from './MenuItem'; +import MenuItemWithTopDescription from './MenuItemWithTopDescription'; type HighlightableMenuItemWithTopDescriptionProps = MenuItemProps & { /** Should the menu item be highlighted? */ @@ -18,14 +18,9 @@ function HighlightableMenuItemWithTopDescription({highlighted, outerWrapperStyle }); return ( - );