[$250] Improve UX of modifying single line text inputs populated with very long text

[marcaaron]

Coming from https://expensify.slack.com/archives/C05RECHFBEW/p1712957589044869

Problem

When updating an existing Group chat "name" field in the App it is difficult to clear the pre-populated text in mobile views and on mobile devices.

Example:

Solution

Let's solve this problem by adding an x circle icon to allow clearing the input.

Let's also do this in a cross-platform way and universally across different areas of the app where it might be useful.

Deliverables:

• Investigate how to add this icon to our custom TextInput
• Ensure the solution will work on all platforms.
• Identify areas in the application where this pattern would be useful to apply and update them accordingly.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01644d92b58b119eb5
• Upwork Job ID: 1780333757252235264
• Last Price Increase: 2024-04-16
• Automatic offers:
• eh2077 | Reviewer | 0
• nkdengineer | Contributor | 0

[melvin-bot]

Triggered auto assignment to @twisterdotcom (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01644d92b58b119eb5

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eh2077 (External)

[marcaaron]

@nkdengineer Removing your proposal as it's insufficient. Please post a full proposal once you are done drafting it.

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Improve UX of modifying single line text inputs populated with very long text

What is the root cause of that problem?

• It is new feature

What changes do you think we should make in order to solve the problem?

1. Add a new "x" button to allow the user to clear the input (style is the same as this ). Then we can pass down the onClearInput prop to TextInput that will trigger once user clicks on it. We should add it to the TextInput component and we can use entire the app. To do this, in here, add:

{isFocused && !isReadOnly && shouldShowClearButton && value && (
                                <Tooltip text="Clear">
                                    <PressableWithoutFeedback
                                        style={[styles.mt4, styles.ml1]}
                                        onMouseDown={(e) => {
                                            e.preventDefault();
                                        }}
                                        onPress={(e) => {
                                            onInputChange?.(''); // Can use setValue('') as well
                                            onClearInput?.(inputID);
                                        }}
                                    >
                                        <ClearIcon /> // Based on design
                                    </PressableWithoutFeedback>
                                </Tooltip>
                            )}

• In the above, we only display the clear button if isFocused && !isReadOnly && shouldShowClearButton && value: true

2. Because we always use TextInput in FormWrapper rather than use TextInput individually, so in FormProvider we should create a new function (do not need now, but in future), named onClearInput:

                onClearInput: (key) => {
                    // Side effect when clearing input
                },

3. Finally, here is how we can use the clear input feature:

      <FormProvider>
              <InputWrapper InputComponent={TextInput} shouldShowClearButton />
     </FormProvider>

What alternative solutions did you explore? (Optional)

• NA

[ZhenjaHorbach]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Improve UX of modifying single line text inputs populated with very long text

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

To fix this issue we can update BaseTextInput and add new component which will have the same styles as the loader

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

Lines 384 to 390 in 5e3cca2

	{inputProps.isLoading && (
	<ActivityIndicator
	size="small"
	color={theme.iconSuccessFill}
	style={[styles.mt4, styles.ml1]}
	/>
	)}

Draft button ( It is a little unclear when we should show the button (Immediately after entering the first character or at a certain length of text?)

Following this comment I think we'd better disable this button for mobile devices
#40313 (comment)

                            <PressableWithoutFeedback
                                style={[styles.mt4, styles.ml1]}
                                onPress={() => {
                                    setValue('');
                                    input.current?.focus();
                                }}
                            >
                                <Icon
                                    src={Expensicons.Close}
                                    fill={theme.icon}
                                />
                            </PressableWithoutFeedback>

I don't remember that we have a round icon with x
But we can make something similar using styles

And in case Group name we can update group name screen to show error when we clear input and try to save
Because in this case we just use previous value

Plus we need to add new param to make this optional
But I think it's not a bad idea to make this button for all inputs
Because We have many places where it would be convenient to delete all entered text

But for this we need to add condition to show element only when isLoading is false (But here it already depends on the design team )

What alternative solutions did you explore? (Optional)

NA

[nkdengineer]

@eh2077 I updated proposal

[eh2077]

@marcaaron I doubt we should add such icon to help clear long text. I see following downsides if adding the clearing icon

• It risks deleting the text if I just want to edit from the end
• It makes the UI look ugly. From my experience, I feel only old forms have such clearing icon.

I tested deleting text on both Android (using emulator) and iOS devices and I found that we only need to long press the text, press Select all and then press delete. I don't see it's that difficult to delete them, see below clips

iOS	Android
0-ios.mp4	android.mov
0-mobile-safari.mp4	mobile-chrome.mov

[brunovjk]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Adding an x circle icon to allow clearing the input when updating an existing Group chat "name" field

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

To address the issue of improving the user experience when modifying single line text inputs populated with very long text, we propose the following changes:

1. Integrate Clear Button: Add a new x button to allow users to clear the input field. This button should be styled consistently with other UI elements and added within the BaseTextInput component.

{isFocused && !isReadOnly && shouldShowClearButton && value && (
    <Tooltip text="Clear">
        <PressableWithoutFeedback
            style={[styles.mt4, styles.ml1]}
            onMouseDown={(e) => {
                e.preventDefault();
            }}
            onPress={(e) => {
                onInputChange?.('');
                onClearInput?.(inputID);
            }}
        >
            <ClearIcon />
        </PressableWithoutFeedback>
    </Tooltip>
)}

2. Implement Clear Logic: Utilize the onClearInput prop to trigger the clearing functionality when the user interacts with the clear button. Ensure this logic is incorporated into the BaseTextInput component.

onClearInput: (key) => {
    // Implement side effects when clearing input
    // For example:
    setValue('');
},

3. Conditional Display: Display the clear button only under specific conditions, such as when the input field is focused, not read-only, contains text to clear and is on Native devices.

{isFocused && !isReadOnly && shouldShowClearButton && value && (
    // Render the clear button
)}

4. Consider Universal Application: Evaluate the possibility of applying this clear button feature universally across various input fields throughout the application. Ensure consistency and usability across different user interactions.

What alternative solutions did you explore? (Optional)

N/A

[eh2077]

@twisterdotcom What do you think of this #40313 (comment) ? Is it really necessary to add this feature?

cc @marcaaron

[eh2077]

Thank you all for your proposals.

I think we can go with @nkdengineer 's proposal if we want to add this feature. I also added my thoughts about this feature here #40313 (comment).

@nkdengineer was first to figure out the key ideas for implementing this feature, and their refined version includes additional details that need consideration. However, it's advisable to avoid excessive editing to maintain clarity.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @marcaaron is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[marcaaron]

@eh2077 While I appreciate the concerns I don't share them. This is a fairly common pattern.

The problem with the current design is that the field will always be very full of text if you invite a few people or more so it's an improvement over long press, select all, delete (which is harder to perform).

[melvin-bot]

📣 @eh2077 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[nkdengineer]

@marcaaron Can you give me a design for the "Clear" icon? Thanks

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[dannymcclain]

Here is the x-circle icon: x-circle.svg.zip

I thought we already had it in App/assets/images but I was wrong!

[nkdengineer]

@dannymcclain Please finalize the size of the button and its position. Below are the results when I set the height and width both to 18.

default	center

[shawnborton]

We generally do base4 for all of our sizing, so I have a feeling this should be 20x20. Will wait for Danny to chime in though!

[dannymcclain]

Yeah let's stick with 20x20! I'm fine with the default image you've shown there.

[twisterdotcom]

Looks like this was deployed to prod 5 days ago, so I need to pay @eh2077 and @nkdengineer in a few days right? Not sure why the automation didn't work.

[twisterdotcom]

Payment Summary:

• @eh2077 paid $250 here (C+)
• @nkdengineer paid $250 here (Contributor)

No regression requirement for new feature.