From 65e1251f38a16b7f133bc807c81b700c98465f0d Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 16 Apr 2024 16:58:16 +0700
Subject: [PATCH 1/6] feature: add props isSplit to button with dropdown

---
 .../ButtonWithDropdownMenu/index.tsx          | 76 ++++++++++++-------
 .../ButtonWithDropdownMenu/types.ts           |  3 +
 src/pages/workspace/WorkspaceMembersPage.tsx  |  1 +
 .../categories/WorkspaceCategoriesPage.tsx    |  1 +
 .../distanceRates/PolicyDistanceRatesPage.tsx |  1 +
 .../workspace/tags/WorkspaceTagsPage.tsx      |  1 +
 .../workspace/taxes/WorkspaceTaxesPage.tsx    |  1 +
 7 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
index a4e6e2c87fec..7ee225ad9ace 100644
--- a/src/components/ButtonWithDropdownMenu/index.tsx
+++ b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
@@ -10,10 +10,12 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import type {AnchorPosition} from '@src/styles';
+import type IconAsset from '@src/types/utils/IconAsset';
 import type {ButtonWithDropdownMenuProps} from './types';
 
 function ButtonWithDropdownMenu<IValueType>({
     success = false,
+    isSplit = true,
     isLoading = false,
     isDisabled = false,
     pressOnEnter = false,
@@ -40,7 +42,7 @@ function ButtonWithDropdownMenu<IValueType>({
     const [isMenuVisible, setIsMenuVisible] = useState(false);
     const [popoverAnchorPosition, setPopoverAnchorPosition] = useState<AnchorPosition | null>(null);
     const {windowWidth, windowHeight} = useWindowDimensions();
-    const caretButton = useRef<View & HTMLDivElement>(null);
+    const caretButton = useRef<View | HTMLDivElement | null>(null);
     const selectedItem = options[selectedItemIndex] || options[0];
     const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(buttonSize);
     const isButtonSizeLarge = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE;
@@ -65,6 +67,18 @@ function ButtonWithDropdownMenu<IValueType>({
         }
     }, [windowWidth, windowHeight, isMenuVisible, anchorAlignment.vertical]);
 
+    const iconRight = useMemo(
+        () => (
+            <Icon
+                medium={isButtonSizeLarge}
+                small={!isButtonSizeLarge}
+                src={Expensicons.DownArrow}
+                fill={success ? theme.buttonSuccessText : theme.icon}
+            />
+        ),
+        [isButtonSizeLarge, success, theme.buttonSuccessText, theme.icon],
+    );
+
     return (
         <View style={wrapperStyle}>
             {shouldAlwaysShowDropdownMenu || options.length > 1 ? (
@@ -72,8 +86,10 @@ function ButtonWithDropdownMenu<IValueType>({
                     <Button
                         success={success}
                         pressOnEnter={pressOnEnter}
-                        ref={buttonRef}
-                        onPress={(event) => onPress(event, selectedItem.value)}
+                        ref={(ref) => {
+                            caretButton.current = ref;
+                        }}
+                        onPress={(event) => (!isSplit ? setIsMenuVisible(!isMenuVisible) : onPress(event, selectedItem.value))}
                         text={customText ?? selectedItem.text}
                         isDisabled={isDisabled || !!selectedItem.disabled}
                         isLoading={isLoading}
@@ -81,34 +97,38 @@ function ButtonWithDropdownMenu<IValueType>({
                         style={[styles.flex1, styles.pr0]}
                         large={isButtonSizeLarge}
                         medium={!isButtonSizeLarge}
-                        innerStyles={[innerStyleDropButton, customText !== undefined && styles.cursorDefault, customText !== undefined && styles.pointerEventsNone]}
+                        innerStyles={[innerStyleDropButton, !isSplit && styles.dropDownButtonCartIconView]}
                         enterKeyEventListenerPriority={enterKeyEventListenerPriority}
+                        iconRight={iconRight as IconAsset}
+                        shouldShowRightIcon={!isSplit}
                     />
 
-                    <Button
-                        ref={caretButton}
-                        success={success}
-                        isDisabled={isDisabled}
-                        style={[styles.pl0]}
-                        onPress={() => setIsMenuVisible(!isMenuVisible)}
-                        shouldRemoveLeftBorderRadius
-                        large={isButtonSizeLarge}
-                        medium={!isButtonSizeLarge}
-                        innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton]}
-                        enterKeyEventListenerPriority={enterKeyEventListenerPriority}
-                    >
-                        <View style={[styles.dropDownButtonCartIconView, innerStyleDropButton]}>
-                            <View style={[success ? styles.buttonSuccessDivider : styles.buttonDivider]} />
-                            <View style={[isButtonSizeLarge ? styles.dropDownLargeButtonArrowContain : styles.dropDownMediumButtonArrowContain]}>
-                                <Icon
-                                    medium={isButtonSizeLarge}
-                                    small={!isButtonSizeLarge}
-                                    src={Expensicons.DownArrow}
-                                    fill={success ? theme.buttonSuccessText : theme.icon}
-                                />
+                    {isSplit && (
+                        <Button
+                            ref={caretButton}
+                            success={success}
+                            isDisabled={isDisabled}
+                            style={[styles.pl0]}
+                            onPress={() => setIsMenuVisible(!isMenuVisible)}
+                            shouldRemoveLeftBorderRadius
+                            large={isButtonSizeLarge}
+                            medium={!isButtonSizeLarge}
+                            innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton]}
+                            enterKeyEventListenerPriority={enterKeyEventListenerPriority}
+                        >
+                            <View style={[styles.dropDownButtonCartIconView, innerStyleDropButton]}>
+                                <View style={[success ? styles.buttonSuccessDivider : styles.buttonDivider]} />
+                                <View style={[isButtonSizeLarge ? styles.dropDownLargeButtonArrowContain : styles.dropDownMediumButtonArrowContain]}>
+                                    <Icon
+                                        medium={isButtonSizeLarge}
+                                        small={!isButtonSizeLarge}
+                                        src={Expensicons.DownArrow}
+                                        fill={success ? theme.buttonSuccessText : theme.icon}
+                                    />
+                                </View>
                             </View>
-                        </View>
-                    </Button>
+                        </Button>
+                    )}
                 </View>
             ) : (
                 <Button
diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts
index 87db9a29d827..1b4533087e44 100644
--- a/src/components/ButtonWithDropdownMenu/types.ts
+++ b/src/components/ButtonWithDropdownMenu/types.ts
@@ -74,6 +74,9 @@ type ButtonWithDropdownMenuProps<TValueType> = {
 
     /** Additional style to add to the wrapper */
     wrapperStyle?: StyleProp<ViewStyle>;
+
+    /** Whether the button should use split style or not */
+    isSplit?: boolean;
 };
 
 export type {PaymentType, WorkspaceMemberBulkActionType, WorkspaceDistanceRatesBulkActionType, DropdownOption, ButtonWithDropdownMenuProps, WorkspaceTaxRatesBulkActionType};
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index dfaf50c0bcf6..f7427c865636 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -515,6 +515,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, invitedEmailsToAc
                         onPress={() => null}
                         options={getBulkActionsButtonOptions()}
                         buttonRef={dropdownButtonRef}
+                        isSplit={false}
                         style={[isSmallScreenWidth && styles.flexGrow1]}
                     />
                 ) : (
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
index 5c2dbe6de352..105cd9d28d67 100644
--- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
+++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -208,6 +208,7 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
                     buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
                     customText={translate('workspace.common.selected', {selectedNumber: selectedCategoriesArray.length})}
                     options={options}
+                    isSplit={false}
                     style={[isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3]}
                 />
             );
diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
index 37c827ebdf31..5faf99e0c59a 100644
--- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
+++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
@@ -253,6 +253,7 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
                     buttonRef={dropdownButtonRef}
                     style={[isSmallScreenWidth && styles.flexGrow1]}
                     wrapperStyle={styles.w100}
+                    isSplit={false}
                 />
             )}
         </View>
diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
index eed0015a9aa4..d01d7c8d3b4d 100644
--- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -216,6 +216,7 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
                     onPress={() => null}
                     shouldAlwaysShowDropdownMenu
                     pressOnEnter
+                    isSplit={false}
                     buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
                     customText={translate('workspace.common.selected', {selectedNumber: selectedTagsArray.length})}
                     options={options}
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
index 72680760f08f..a956cf9663ae 100644
--- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
+++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
@@ -226,6 +226,7 @@ function WorkspaceTaxesPage({
             customText={translate('workspace.common.selected', {selectedNumber: selectedTaxesIDs.length})}
             shouldAlwaysShowDropdownMenu
             pressOnEnter
+            isSplit={false}
             style={[isSmallScreenWidth && styles.w50, isSmallScreenWidth && styles.mb3]}
         />
     );

From 98fef234cb71846c68b6ac4fde5434d0f7f5f344 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 16 Apr 2024 21:46:09 +0700
Subject: [PATCH 2/6] use useCallBack to get icon right

---
 src/components/ButtonWithDropdownMenu/index.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
index 7ee225ad9ace..9c2ab4b36734 100644
--- a/src/components/ButtonWithDropdownMenu/index.tsx
+++ b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
@@ -10,7 +10,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import type {AnchorPosition} from '@src/styles';
-import type IconAsset from '@src/types/utils/IconAsset';
 import type {ButtonWithDropdownMenuProps} from './types';
 
 function ButtonWithDropdownMenu<IValueType>({
@@ -67,7 +66,7 @@ function ButtonWithDropdownMenu<IValueType>({
         }
     }, [windowWidth, windowHeight, isMenuVisible, anchorAlignment.vertical]);
 
-    const iconRight = useMemo(
+    const getIconRightButton = useCallback(
         () => (
             <Icon
                 medium={isButtonSizeLarge}
@@ -99,7 +98,7 @@ function ButtonWithDropdownMenu<IValueType>({
                         medium={!isButtonSizeLarge}
                         innerStyles={[innerStyleDropButton, !isSplit && styles.dropDownButtonCartIconView]}
                         enterKeyEventListenerPriority={enterKeyEventListenerPriority}
-                        iconRight={iconRight as IconAsset}
+                        iconRight={getIconRightButton}
                         shouldShowRightIcon={!isSplit}
                     />
 

From a9d6b4bd5ad26334c9645abe424f70ed7b94e33e Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 17 Apr 2024 16:35:14 +0700
Subject: [PATCH 3/6] fix add custom icon right button

---
 src/components/Button/index.tsx               | 20 ++++++++++++-------
 .../ButtonWithDropdownMenu/index.tsx          |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 68f1aac41a5b..25a9fcbc215a 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -115,6 +115,9 @@ type ButtonProps = Partial<ChildrenProps> & {
 
     /** Boolean whether to display the right icon */
     shouldShowRightIcon?: boolean;
+
+    /** The custom icon to display to the right of the text */
+    customRightIcon?: React.ReactNode;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority'>;
@@ -198,6 +201,7 @@ function Button(
 
         id = '',
         accessibilityLabel = '',
+        customRightIcon,
         ...rest
     }: ButtonProps,
     ref: ForwardedRef<View | HTMLDivElement>,
@@ -253,13 +257,15 @@ function Button(
                     </View>
                     {shouldShowRightIcon && (
                         <View style={[styles.justifyContentCenter, large ? styles.ml2 : styles.ml1, iconRightStyles]}>
-                            <Icon
-                                src={iconRight}
-                                fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
-                                small={small}
-                                medium={medium}
-                                large={large}
-                            />
+                            {customRightIcon ?? (
+                                <Icon
+                                    src={iconRight}
+                                    fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
+                                    small={small}
+                                    medium={medium}
+                                    large={large}
+                                />
+                            )}
                         </View>
                     )}
                 </View>
diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
index 9c2ab4b36734..16c9804f79d0 100644
--- a/src/components/ButtonWithDropdownMenu/index.tsx
+++ b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -98,7 +98,7 @@ function ButtonWithDropdownMenu<IValueType>({
                         medium={!isButtonSizeLarge}
                         innerStyles={[innerStyleDropButton, !isSplit && styles.dropDownButtonCartIconView]}
                         enterKeyEventListenerPriority={enterKeyEventListenerPriority}
-                        iconRight={getIconRightButton}
+                        customRightIcon={getIconRightButton()}
                         shouldShowRightIcon={!isSplit}
                     />
 

From 0997b0a4eaef675cb535abef7188f980d3bb23cc Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 23 Apr 2024 15:31:55 +0700
Subject: [PATCH 4/6] Use more reasonable variable names

---
 src/components/ButtonWithDropdownMenu/index.tsx    | 14 +++++++-------
 src/components/ButtonWithDropdownMenu/types.ts     |  2 +-
 src/pages/workspace/WorkspaceMembersPage.tsx       |  2 +-
 .../categories/WorkspaceCategoriesPage.tsx         |  2 +-
 .../distanceRates/PolicyDistanceRatesPage.tsx      |  2 +-
 src/pages/workspace/tags/WorkspaceTagsPage.tsx     |  2 +-
 src/pages/workspace/taxes/WorkspaceTaxesPage.tsx   |  2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
index 16c9804f79d0..1ac73844509b 100644
--- a/src/components/ButtonWithDropdownMenu/index.tsx
+++ b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -14,7 +14,7 @@ import type {ButtonWithDropdownMenuProps} from './types';
 
 function ButtonWithDropdownMenu<IValueType>({
     success = false,
-    isSplit = true,
+    isSplitButton = true,
     isLoading = false,
     isDisabled = false,
     pressOnEnter = false,
@@ -66,7 +66,7 @@ function ButtonWithDropdownMenu<IValueType>({
         }
     }, [windowWidth, windowHeight, isMenuVisible, anchorAlignment.vertical]);
 
-    const getIconRightButton = useCallback(
+    const getIconRight = useCallback(
         () => (
             <Icon
                 medium={isButtonSizeLarge}
@@ -88,7 +88,7 @@ function ButtonWithDropdownMenu<IValueType>({
                         ref={(ref) => {
                             caretButton.current = ref;
                         }}
-                        onPress={(event) => (!isSplit ? setIsMenuVisible(!isMenuVisible) : onPress(event, selectedItem.value))}
+                        onPress={(event) => (!isSplitButton ? setIsMenuVisible(!isMenuVisible) : onPress(event, selectedItem.value))}
                         text={customText ?? selectedItem.text}
                         isDisabled={isDisabled || !!selectedItem.disabled}
                         isLoading={isLoading}
@@ -96,13 +96,13 @@ function ButtonWithDropdownMenu<IValueType>({
                         style={[styles.flex1, styles.pr0]}
                         large={isButtonSizeLarge}
                         medium={!isButtonSizeLarge}
-                        innerStyles={[innerStyleDropButton, !isSplit && styles.dropDownButtonCartIconView]}
+                        innerStyles={[innerStyleDropButton, !isSplitButton && styles.dropDownButtonCartIconView]}
                         enterKeyEventListenerPriority={enterKeyEventListenerPriority}
-                        customRightIcon={getIconRightButton()}
-                        shouldShowRightIcon={!isSplit}
+                        customRightIcon={getIconRight()}
+                        shouldShowRightIcon={!isSplitButton}
                     />
 
-                    {isSplit && (
+                    {isSplitButton && (
                         <Button
                             ref={caretButton}
                             success={success}
diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts
index 1b4533087e44..1ad2ccb0d717 100644
--- a/src/components/ButtonWithDropdownMenu/types.ts
+++ b/src/components/ButtonWithDropdownMenu/types.ts
@@ -76,7 +76,7 @@ type ButtonWithDropdownMenuProps<TValueType> = {
     wrapperStyle?: StyleProp<ViewStyle>;
 
     /** Whether the button should use split style or not */
-    isSplit?: boolean;
+    isSplitButton?: boolean;
 };
 
 export type {PaymentType, WorkspaceMemberBulkActionType, WorkspaceDistanceRatesBulkActionType, DropdownOption, ButtonWithDropdownMenuProps, WorkspaceTaxRatesBulkActionType};
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index f1107a1a2b8f..e8464e4498d5 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -516,7 +516,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
                         onPress={() => null}
                         options={getBulkActionsButtonOptions()}
                         buttonRef={dropdownButtonRef}
-                        isSplit={false}
+                        isSplitButton={false}
                         style={[isSmallScreenWidth && styles.flexGrow1]}
                     />
                 ) : (
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
index 8c91a743e3c7..b0eb61b0d9d6 100644
--- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
+++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -215,7 +215,7 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
                     buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
                     customText={translate('workspace.common.selected', {selectedNumber: selectedCategoriesArray.length})}
                     options={options}
-                    isSplit={false}
+                    isSplitButton={false}
                     style={[isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3]}
                 />
             );
diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
index 031e3f456db1..8e1eeb7b66f4 100644
--- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
+++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
@@ -260,7 +260,7 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
                     buttonRef={dropdownButtonRef}
                     style={[isSmallScreenWidth && styles.flexGrow1]}
                     wrapperStyle={styles.w100}
-                    isSplit={false}
+                    isSplitButton={false}
                 />
             )}
         </View>
diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
index d5ade4c3fc6c..66cd5b07f3cc 100644
--- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -225,7 +225,7 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
                     onPress={() => null}
                     shouldAlwaysShowDropdownMenu
                     pressOnEnter
-                    isSplit={false}
+                    isSplitButton={false}
                     buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
                     customText={translate('workspace.common.selected', {selectedNumber: selectedTagsArray.length})}
                     options={options}
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
index 3c5e790cfbca..65a332868da4 100644
--- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
+++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
@@ -233,7 +233,7 @@ function WorkspaceTaxesPage({
             customText={translate('workspace.common.selected', {selectedNumber: selectedTaxesIDs.length})}
             shouldAlwaysShowDropdownMenu
             pressOnEnter
-            isSplit={false}
+            isSplitButton={false}
             style={[isSmallScreenWidth && styles.w50, isSmallScreenWidth && styles.mb3]}
         />
     );

From b47c929047042f05793880ab140d788a849d9dd6 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 25 Apr 2024 15:18:36 +0700
Subject: [PATCH 5/6] fix: remmove custom right icon button

---
 src/components/Button/index.tsx                | 17 ++++++++++++-----
 .../ButtonWithDropdownMenu/index.tsx           | 18 +++---------------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 25a9fcbc215a..ce012d650512 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -116,8 +116,8 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Boolean whether to display the right icon */
     shouldShowRightIcon?: boolean;
 
-    /** The custom icon to display to the right of the text */
-    customRightIcon?: React.ReactNode;
+    /** Whether the button should use split style or not */
+    isSplitButton?: boolean;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority'>;
@@ -201,7 +201,7 @@ function Button(
 
         id = '',
         accessibilityLabel = '',
-        customRightIcon,
+        isSplitButton = false,
         ...rest
     }: ButtonProps,
     ref: ForwardedRef<View | HTMLDivElement>,
@@ -209,7 +209,7 @@ function Button(
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-
+    
     const renderContent = () => {
         if ('children' in rest) {
             return rest.children;
@@ -257,7 +257,14 @@ function Button(
                     </View>
                     {shouldShowRightIcon && (
                         <View style={[styles.justifyContentCenter, large ? styles.ml2 : styles.ml1, iconRightStyles]}>
-                            {customRightIcon ?? (
+                            {!isSplitButton ? (
+                                <Icon
+                                    src={iconRight}
+                                    fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
+                                    small={medium}
+                                    medium={large}
+                                />
+                            ) : (
                                 <Icon
                                     src={iconRight}
                                     fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
index 1ac73844509b..a28b7ebf0864 100644
--- a/src/components/ButtonWithDropdownMenu/index.tsx
+++ b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
@@ -65,19 +65,6 @@ function ButtonWithDropdownMenu<IValueType>({
             });
         }
     }, [windowWidth, windowHeight, isMenuVisible, anchorAlignment.vertical]);
-
-    const getIconRight = useCallback(
-        () => (
-            <Icon
-                medium={isButtonSizeLarge}
-                small={!isButtonSizeLarge}
-                src={Expensicons.DownArrow}
-                fill={success ? theme.buttonSuccessText : theme.icon}
-            />
-        ),
-        [isButtonSizeLarge, success, theme.buttonSuccessText, theme.icon],
-    );
-
     return (
         <View style={wrapperStyle}>
             {shouldAlwaysShowDropdownMenu || options.length > 1 ? (
@@ -98,8 +85,9 @@ function ButtonWithDropdownMenu<IValueType>({
                         medium={!isButtonSizeLarge}
                         innerStyles={[innerStyleDropButton, !isSplitButton && styles.dropDownButtonCartIconView]}
                         enterKeyEventListenerPriority={enterKeyEventListenerPriority}
-                        customRightIcon={getIconRight()}
+                        iconRight={Expensicons.DownArrow}
                         shouldShowRightIcon={!isSplitButton}
+                        isSplitButton={isSplitButton}
                     />
 
                     {isSplitButton && (

From 3fc5ecf392de139374923b2b303a56c8f536884f Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Fri, 26 Apr 2024 10:05:37 +0700
Subject: [PATCH 6/6] fix lint

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index ce012d650512..b6e20164348b 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -209,7 +209,7 @@ function Button(
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    
+
     const renderContent = () => {
         if ('children' in rest) {
             return rest.children;