[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 contributors@expensify.com 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): htad26+tttyyu@gmail.com
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.

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)

[Shahidullah-Muffakir]

Proposal

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

When user opens the Tags creating page, the input is not focused and the keyboard is not opened.

What is the root cause of that problem?

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}
	/>

here we did not pass :
autoFocus
shouldDelayFocus

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

pass these

autoFocus
shouldDelayFocu

1. autoFocus: it will focus the input
2. shouldDelayFocus: it will open the keyboard.

<InputWrapper 
     InputComponent={TextInput} 
+     autoFocus
+    shouldDelayFocus

[andriivitiv]

It's the same issue as #53314 and will be fixed by proposals from there. @sonialiap can we put this on hold and retest later?

[andriivitiv]

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.

[andriivitiv]

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