[Due for payment 2025-02-13] [$250] mWeb - Workspace - Input is not auto-focused and keyboard doesn't open when creating a tag

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.67-1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Login to new dot with an account
2. Create a new workspace
3. Go to more features > Tags > Enable tags
4. Navigate to tags page > Add tag

Expected Result:

Tag creation page is opened, the name input is automatically focused and keyboard is opened

Actual Result:

The name input isn't automatically focused and the keyboard is not opened.
Sometimes the focus and the keyboard appear with a delay

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6677791_1732697567850.video_2024-11-27_11-48-07.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863569158386608990
• Upwork Job ID: 1863569158386608990
• Last Price Increase: 2024-12-09
• Automatic offers:
• linhvovan29546 | Contributor | 105879100

Issue Owner

Current Issue Owner: @sonialiap

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Themoonalsofall]

Proposal

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

mWeb - Workspace - Input is not auto-focused and keyboard doesn't open when creating a tag

What is the root cause of that problem?

We are missing autoFocus props in this input

App/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx

Lines 92 to 100 in c62ab78

	<InputWrapper
	InputComponent={TextInput}
	maxLength={CONST.TAG_NAME_LIMIT}
	label={translate('common.name')}
	accessibilityLabel={translate('common.name')}
	inputID={INPUT_IDS.TAG_NAME}
	role={CONST.ROLE.PRESENTATION}
	ref={inputCallbackRef}
	/>

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

Add autoFocus to this input

What alternative solutions did you explore? (Optional)

[CyberAndrii]

I don't think your proposals have the correct RCA and solution. We already use useAutoFocusInput() here which should handle the focus. However, there's a bug that prevents InteractionManager.runAfterInteractions callbacks from executing. Also, useAutoFocusInput() is preferred over autoFocus.

[CyberAndrii]

I did some more testing and it appears that specifically in this case InteractionManager callbacks are being blocked by a playing lottie animation on the previous page. If I disable it here by setting autoPlay={false} then autofocus works again.

cc @Themoonalsofall @Shahidullah-Muffakir if you want to investigate this further and update your proposals.

I wasn't able to reproduce this issue on a Pixel 8 Pro emulator so I tried various Browserstack devices and the results are as follows

Reproducible

• Galaxy A10
• Redmi Note 12 4G
• Redmi Note 8

Not reproducible

• Galaxy S22 Ultra
• Galaxy S24 Ultra
• Pixel 6 Pro
• Pixel 4
• OnePlus 11R

[melvin-bot]

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

[melvin-bot]

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

[sonialiap]

@mollfpr we have a few proposals for your review :)

[mollfpr]

I don't think your proposals have the correct RCA and solution. We already use useAutoFocusInput() here which should handle the focus.

I agree with @CyberAndrii. Both @Themoonalsofall @Shahidullah-Muffakir proposals don't solve the main issue.

[melvin-bot]

@sonialiap, @mollfpr Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mollfpr]

Not overdue 👀

[melvin-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]

@sonialiap, @mollfpr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

📣 @linhvovan29546 🎉 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 📖

[linhvovan29546]

PR is ready for review!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.94-25 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix input not auto-focused on mWeb #55823

If no regressions arise, payment will be issued on 2025-02-13. 🎊

For reference, here are some details about the assignees on this issue:

• @rayane-d requires payment (Needs manual offer from BZ)
• @linhvovan29546 requires payment automatic offer (Contributor)

[melvin-bot]

@rayane-d @sonialiap @rayane-d The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[rayane-d]

BugZero Checklist:

• Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/48444/files#r1947702827

• If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A

• If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [@sonialiap] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue: https://github.com/Expensify/Expensify/issues/469979

Regression Test Proposal

#### Test:

1. Login to new dot with an account
2. Create a new workspace
3. Go to more features > Tags > Enable tags
4. Navigate to tags page > Add tag
5. Verify Tag creation page is opened, the name input is automatically focused and keyboard is opened

Do we agree 👍 or 👎

[sonialiap]

Payment summary:

• @rayane-d $250 to be paid in NewDot
• @linhvovan29546 $250 paid in upwork

[rayane-d]

@sonialiap I will request in NewDot. Can you please update the payment summary?

[melvin-bot]

@sonialiap, @MonilBhavsar, @rayane-d, @linhvovan29546 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[sonialiap]

@rayane-d updated payment summary to reflect payment in ND :)

[garrettmknight]

$250 approved for @rayane-d