[HOLD for payment 2023-10-23][$2000] Choosing group members change the search input and it's label style

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1.Click on the FAB and create New group 2.Start adding the group members and notice the search input and it's label

Expected Result:

Choosing group members shouldn't change the search input and it's label style for better UX.

Actual Result:

Every time we choose a member we change the search input and it's label, because of the search input refocus

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android / native
• [ ] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [x] MacOS / Chrome / Safari
• [x] MacOS / Desktop

Version Number: 1.3.40-1 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

Screencast from 13-07-23 05_23_15.webm

https://github.com/Expensify/App/assets/43996225/358c55d1-b9d8-445f-8241-26c76b07f216

Expensify/Expensify Issue URL: Issue reported by: @Ahmed-Abdella Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689216766939829

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f1e32514bd8c7aa9
• Upwork Job ID: 1681446377913671680
• Last Price Increase: 2023-08-07
• Automatic offers:
• situchan | Reviewer | 27097976
• s-alves10 | Contributor | 27097978
• Ahmed-Abdella | Reporter | 27097981

[melvin-bot[bot]]

Triggered auto assignment to @michaelhaxhiu (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot[bot]]

Bug0 Triage Checklist (Main S/O)

• [x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [x] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• [x] This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• [x] This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• [x] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[s-alves10]

Proposal

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

Search input loses focus when toggling members in new chat page and split bill page unlike as on native platforms

What is the root cause of that problem?

When user selects the members, search input lose the focus, and the focus is set here again https://github.com/Expensify/App/blob/7f063c7b6487e037804e1d97c08a739071e67679/src/components/OptionsSelector/BaseOptionsSelector.js#L347 https://github.com/Expensify/App/blob/98f3b43bde22d028669db8b5c3b993020bb8a8f2/src/components/SelectionList/BaseSelectionList.js#L215 https://github.com/Expensify/App/blob/98f3b43bde22d028669db8b5c3b993020bb8a8f2/src/components/SelectionList/BaseSelectionList.js#L222

Refocusing is the root cause

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

We can prevent the lost of focus by preventing default action of mouse events

1. Add the new props called shouldTakeFocus with default value true to the BaseOptionsList, OptionRow, and BaseListItem components

2. Pass the shouldTakeFocus props down OptionsList -> OptionRow

   shouldTakeFocus={props.shouldTakeFocus}

3. Add the following code above this line and this line

   onMouseDown={this.props.shouldTakeFocus ? undefined : (e) => e.preventDefault()}

4. Pass shouldTakeFocus={!this.props.shouldFocusOnSelectRow} props to OptionsList in BaseOptionsSelector

5. Pass shouldTakeFocus={!shouldFocusOnSelectRow} props to BaseListItem in BaseSelectionList. And add the following props to select all button in BaseSelectionList

       onMouseDown={shouldFocusOnSelectRow ? (e) => e.preventDefault() : undefined}

This works as expected.

Note: We disabled the focusing on selection for mobile browsers intentionally https://github.com/Expensify/App/blob/7f063c7b6487e037804e1d97c08a739071e67679/src/pages/NewChatPage.js#L201 https://github.com/Expensify/App/blob/7f063c7b6487e037804e1d97c08a739071e67679/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js#L271 https://github.com/Expensify/App/blob/98f3b43bde22d028669db8b5c3b993020bb8a8f2/src/pages/workspace/WorkspaceMembersPage.js#L420

I'm keeping them as is for now

Web

https://github.com/Expensify/App/assets/126839717/63019046-302c-4fd7-9c98-e1c31adc38fe

iOS

https://github.com/Expensify/App/assets/126839717/5f27cd69-0472-4d14-9e58-4451166ff57a

Android

https://github.com/Expensify/App/assets/126839717/8d5d5e45-36b9-46b4-b16d-d32c6ee45447

Desktop

https://github.com/Expensify/App/assets/126839717/b9d9c767-d753-4409-9fe9-c6274927e512

What alternative solutions did you explore? (Optional)

[Ahmed-Abdella]

Also happens in split bill Screencast from 15-07-23 05:02:59.webm

[melvin-bot[bot]]

@michaelhaxhiu Huh... This is 4 days overdue. Who can take care of this?

[michaelhaxhiu]

Reproduced easily. And it has the same effect on desktop, so I'm gonna check that box in the Platforms: section of the GH.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~01f1e32514bd8c7aa9

[melvin-bot[bot]]

Current assignee @michaelhaxhiu is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

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

[michaelhaxhiu]

Lol why does it say I added the Overdue label back... Melvin you lie.

[Talha345]

What is the root cause of that problem?

Your RCA is correct but only onMouseDown will suffice.

[s-alves10]

@Talha345 Maybe. But it might cause other issues as in https://github.com/Expensify/App/issues/21727

[melvin-bot[bot]]

@michaelhaxhiu, @0xmiroslav Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@michaelhaxhiu, @0xmiroslav Still overdue 6 days?! Let's take care of this!

[michaelhaxhiu]

@0xmiroslav can you please review the proposal provided?

[michaelhaxhiu]

If none are applicable, I will double the price of this job.

[0xmiros]

still looking for ideal solution

[melvin-bot[bot]]

@michaelhaxhiu @0xmiroslav this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[s-alves10]

still looking for ideal solution

@0xmiroslav We're using this way in BaseTextInput and ReportActionCompose and other several places. Those are important components, you know. I think this is a good choice

[michaelhaxhiu]

doubling price

[melvin-bot[bot]]

Upwork job price has been updated to $2000

[Talha345]

Proposal

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

When we select a group member, the search input label animates which creates kind of a jittering effect.

What is the root cause of that problem?

When we select a user from the OptionsList, the text input loses focus which is the default behaviour and we are then refocusing it again as shown below.

https://github.com/Expensify/App/blob/28acc0267738c3c9305c412cd56d5f93ab8066b3/src/components/OptionsSelector/BaseOptionsSelector.js#L265-L268

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

Elements should only be focused when absolutely required.In this case, we are refocusing on the textInput but we cannot predict user's next action; they may interact with the textInput, click the "create group" button, or perform other actions like closing the modal.So refocusing the textInput when it is empty is not required. In case the user would like to type something in the textInput, he would click on the input and it would regain focus again. Therefore,I would like to propose the following change to prevent this issue from occurring:

If the textInput is empty and has no value it should not be focused again.This can acheived by modifying the if clause mentioned above like this:

  if (this.relatedTarget && ref === this.relatedTarget && this.props.value.length) {
      this.textInput.focus()
      this.relatedTarget = null;
  }

What alternative solutions did you explore? (Optional)

N/A

Result:

https://github.com/Expensify/App/assets/36226639/44a264ae-8cdd-47bc-a06a-2b93a0652b8d

[s-alves10]

Proposal

Updated

[michaelhaxhiu]

@0xmiroslav any update on the latest proposals?

[melvin-bot[bot]]

@michaelhaxhiu @0xmiroslav this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[melvin-bot[bot]]

Triggered auto assignment to @tjferriss (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[michaelhaxhiu]

Note: I'm preparing to go OOO for ~2 weeks, and need a BZ buddy to oversee this while I'm gone.

The next step is for us to field proposals until a winning one is chosen by the C+ @0xmiroslav. If no winning proposals by 08/07, you can double price again from $2k -> $4k to get more activity here.

If this isn't complete by the time I return, I'll take it over! Thanks in advance @tjferriss

[Talha345]

@michaelhaxhiu the C+ member has been MIA and hasn't provided any feedback on the previous proposals!

[0xmiros]

@Talha345 your proposal changes the behavior. I don't think we should lose focus on search while choosing group members if already focused.

[Talha345]

@Talha345 your proposal changes the behavior. I don't think we should lose focus on search while choosing group members if already focused.

Well, it is the default behavior and as I mentioned in my proposal that we cannot predict the user's next action so IMHO it doesn't make sense to refocus it after every member selection if the search field is empty.

[s-alves10]

@0xmiroslav

My solution doesn't refocus(what @Talha345 is concerned), rather prevent losing focus. What's the drawback of my solution?

[Talha345]

If we want to prevent loss of focus in the first place, @s-alves10 's first solution makes the most sense to me.We should keep it simple in this case and not create an entire state just for this purpose and bloat the code unnecessarily.

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@tjferriss, @michaelhaxhiu, @0xmiroslav Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[tjferriss]

@0xmiroslav can you take a look at the above comments and offer some guidance? Thanks!

[situchan]

I'd like to take this as C+ based on discussion

[melvin-bot[bot]]

@tjferriss @michaelhaxhiu @0xmiroslav this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot[bot]]

Current assignee @0xmiroslav is eligible for the Internal assigner, not assigning anyone new.

[s-alves10]

@situchan

Please let me know your thought on my proposal

[aditygrg2]

Proposal

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

Avoiding label style and search input on selecting group numbers on the BaseOptionsSelector component.

What is the root cause of that problem?

When anything is focused document.activeElement changes, which triggers an onBlur event on the textInput and blur is fired on the textInput, blurring it. as mentioned here

After any group is clicked it is refocused again, and refocusing is a problem.

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

Personally, I believe there is no need of refocusing again if the user selects a group or taps anywhere else. The if condition mentioned here can be completely removed. So that the focus can be shifted according to what the user wants. UX-wise, if I click on some contact, I really do not need to focus on text input, if needed I can click on search again, this is better for code too.

What alternative solutions did you explore? (Optional)

Another pretty straightforward solution to just remove what shouldShowTextInput do, and just rely on blur every time to happen when somewhere else is clicked.

Results:

https://github.com/Expensify/App/assets/98523623/2acb2d42-119f-4287-9de7-d5e68735cf88

[situchan]

@trjExpensify can you please assign me here? And I suggest to put this on hold for #22856 as the select behavior might change.

[trjExpensify]

I think that's for @tjferriss :)

[situchan]

I think that's for @tjferriss :)

Ah sorry meant to tag @tjferriss :)

[tjferriss]

@situchan you're assigned.

[melvin-bot[bot]]

@tjferriss, @michaelhaxhiu, @situchan Still overdue 6 days?! Let's take care of this!

[situchan]

The holding issue will be closed as won't fix. We can now resume this issue.

[Talha345]

@situchan Can you please review the proposals above and let us know your thoughts?

[tjferriss]

@situchan friendly reminder on the proposals.

@michaelhaxhiu do you want to take this back over now that you're back from OOO?

[situchan]

@tjferriss let's remove Hold from title