Improve UX of modifying single line text inputs

src/components/Icon/Expensicons.ts

@@ -163,6 +163,7 @@ import Wallet from '@assets/images/wallet.svg';
 import Workflows from '@assets/images/workflows.svg';
 import Workspace from '@assets/images/workspace-default-avatar.svg';
 import Wrench from '@assets/images/wrench.svg';
+import Clear from '@assets/images/x-circle.svg';
 import Zoom from '@assets/images/zoom.svg';
 
 export {
@@ -332,4 +333,5 @@ export {
     ChatBubbleReply,
     Lightbulb,
     DocumentPlus,
+    Clear,
 };

src/components/TextInput/BaseTextInput/index.native.tsx

@@ -14,6 +14,7 @@ import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import RNTextInput from '@components/RNTextInput';
 import Text from '@components/Text';
 import * as styleConst from '@components/TextInput/styleConst';
+import TextInputClearButton from '@components/TextInput/TextInputClearButton';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import useLocalize from '@hooks/useLocalize';
 import useMarkdownStyle from '@hooks/useMarkdownStyle';
@@ -60,6 +61,7 @@ function BaseTextInput(
         prefixCharacter = '',
         inputID,
         isMarkdownEnabled = false,
+        shouldShowClearButton = false,
         prefixContainerStyle = [],
         prefixStyle = [],
         ...props
@@ -368,6 +370,7 @@ function BaseTextInput(
                                 defaultValue={defaultValue}
                                 markdownStyle={markdownStyle}
                             />
+                            {isFocused && !isReadOnly && shouldShowClearButton && value && <TextInputClearButton onPressButton={() => setValue('')} />}
                             {inputProps.isLoading && (
                                 <ActivityIndicator
                                     size="small"

src/components/TextInput/BaseTextInput/index.tsx

@@ -15,6 +15,7 @@ import RNTextInput from '@components/RNTextInput';
 import SwipeInterceptPanResponder from '@components/SwipeInterceptPanResponder';
 import Text from '@components/Text';
 import * as styleConst from '@components/TextInput/styleConst';
+import TextInputClearButton from '@components/TextInput/TextInputClearButton';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import useLocalize from '@hooks/useLocalize';
 import useMarkdownStyle from '@hooks/useMarkdownStyle';
@@ -62,6 +63,7 @@ function BaseTextInput(
         prefixCharacter = '',
         inputID,
         isMarkdownEnabled = false,
+        shouldShowClearButton = false,
         prefixContainerStyle = [],
         prefixStyle = [],
         ...inputProps
@@ -394,6 +396,7 @@ function BaseTextInput(
                                 defaultValue={defaultValue}
                                 markdownStyle={markdownStyle}
                             />
+                            {isFocused && !isReadOnly && shouldShowClearButton && value && <TextInputClearButton onPressButton={() => setValue('')} />}
                             {inputProps.isLoading && (
                                 <ActivityIndicator
                                     size="small"

src/components/TextInput/BaseTextInput/types.ts

@@ -113,6 +113,9 @@ type CustomBaseTextInputProps = {
     /** Should live markdown be enabled. Changes RNTextInput component to RNMarkdownTextInput */
     isMarkdownEnabled?: boolean;
 
+    /** Whether the clear button should be displayed */
+    shouldShowClearButton?: boolean;
+
     /** Style for the prefix */
     prefixStyle?: StyleProp<TextStyle>;
 

src/components/TextInput/TextInputClearButton/index.tsx

@@ -0,0 +1,42 @@
+import {forwardRef} from 'react';
+import Icon from '@components/Icon';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import Tooltip from '@components/Tooltip';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type TextInputClearButtonProps = {
+    onPressButton: () => void;
+};
+
+function TextInputClearButton({onPressButton}: TextInputClearButtonProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    return (
+        <Tooltip text={translate('common.clear')}>
+            <PressableWithoutFeedback
+                style={[styles.mt4, styles.ml1]}
+                accessibilityRole={CONST.ROLE.BUTTON}
+                accessibilityLabel={translate('common.clear')}
+                onMouseDown={(e) => {
+                    e.preventDefault();
+                }}
+                onPress={onPressButton}
+            >
+                <Icon
+                    src={Expensicons.Clear}
+                    width={20}
+                    height={20}
+                    fill={theme.icon}
+                />
+            </PressableWithoutFeedback>
+        </Tooltip>
+    );
+}
+
+TextInputClearButton.displayName = 'TextInputClearButton';
+
+export default forwardRef(TextInputClearButton);

src/languages/en.ts

@@ -327,6 +327,7 @@ export default {
             subtitleText3: 'button below.',
         },
         businessName: 'Business name',
+        clear: 'Clear',
         type: 'Type',
         action: 'Action',
     },

src/languages/es.ts

@@ -317,6 +317,7 @@ export default {
             subtitleText3: '.',
         },
         businessName: 'Nombre de la empresa',
+        clear: 'Borrar',
         type: 'Tipo',
         action: 'Acción',
     },

src/pages/GroupChatNameEditPage.tsx

@@ -107,6 +107,7 @@ function GroupChatNameEditPage({groupChatDraft, route}: GroupChatNameEditPagePro
                     inputID={INPUT_IDS.NEW_CHAT_NAME}
                     role={CONST.ROLE.PRESENTATION}
                     ref={inputCallbackRef}
+                    shouldShowClearButton
                 />
             </FormProvider>
         </ScreenWrapper>