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

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:

Image

Solution

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

Image

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

About this issue

  • Original URL
  • State: open
  • Created 2 months ago
  • Comments: 22 (14 by maintainers)

Most upvoted comments

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

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

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 https://github.com/Expensify/App/issues/40313#issuecomment-2063175554.

@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