[$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

Issue Owner

Current Issue Owner: @MonilBhavsar

[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)

[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

[Shahidullah-Muffakir]

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?

@CyberAndrii These issues seem different, but if you believe they are the same, please share your proposal here. Since this issue was created first, any duplicate would typically be closed in favor of this one.

[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? 💸

[linhvovan29546]

I think this is not correct. React Native 0.76 upgrade only applies to native, while this issue appears on mWeb.

Pinging @sonialiap and @mollfpr, in case you may have missed my comment

[mollfpr]

@linhvovan29546 I am unable to reproduce the issue on my Samsung phone or with the simulator. What might be causing this?

Screen_Recording_20250107_220516_Chrome.mp4

[linhvovan29546]

@linhvovan29546 I am unable to reproduce the issue on my Samsung phone or with the simulator. What might be causing this?

Screen_Recording_20250107_220516_Chrome.mp4

I can reproduce on my Samsung phone with same step in the OP

[mollfpr]

It will be hard if we can't constantly reproduce the issue on the affected platform and I can't confirm if the solution works.

[linhvovan29546]

It will be hard if we can't constantly reproduce the issue on the affected platform and I can't confirm if the solution works.

Honestly, I can still reproduce this issue on staging with my device, but it seems challenging since you are unable to reproduce it on your device.

[melvin-bot]

@sonialiap, @mollfpr Eep! 4 days overdue now. Issues have feelings too...

[linhvovan29546]

@mollfpr I looked into the steps to reproduce the issue. You can test it under high CPU usage conditions.

[melvin-bot]

@sonialiap, @mollfpr 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@sonialiap, @mollfpr Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[melvin-bot]

@sonialiap, @mollfpr 12 days overdue now... This issue's end is nigh!

[mollfpr]

@linhvovan29546 How can I emulate the high CPU usage on the Android emulator? I try to create an AVD with CPU core of 1 and RAM 512MB, but can't reproduce the issue.

[rayane-djouah]

@mollfpr I'm able to reproduce on my physical device if you want me to take over the C+ review

screen-20250123-180334.mp4

[mollfpr]

@rayane-djouah Yup, please take over the issue 🙏

[rayane-djouah]

@linhvovan29546's proposal looks good to me

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rayane-djouah]

@MonilBhavsar please assign me as well. Thanks!

[rayane-djouah]

We don't need [Hold for React Native 0.76] in the title

[MonilBhavsar]

Is this on HOLD?

[rayane-djouah]

This is not on hold

[MonilBhavsar]

Okay thanks! Took it off HOLD. I will review this tomorrow

[rayane-djouah]

@MonilBhavsar kind reminder :)

[MonilBhavsar]

However, the Lottie animation continues running in the background, preventing runAfterInteractions from executing.

Curious to know why it only happens on specific devices, and is this the only place where this issue happens, I don't think so. As we use animations at many places in the App

[linhvovan29546]

Curious to know why it only happens on specific devices.

I'm not sure why this happens on specific devices. I think it may be related to the device's hardware as some of the affected devices can be found here: #53208 (comment) (Thank you to @CyberAndrii for investigating!)

and is this the only place where this issue happens.

The previous screen of the create tag page is the workspace settings tag page, which includes a Lottie animation. And on the create tag page, we use useAutoFocusInput to focus the input field, as mentioned in my proposal.

As we use animations at many places in the App.

For many places in the app, I’ve searched thoroughly and noticed that they are not the same as this case.

In summary, my proposal covers the missing case in mWeb #48444, where the LEFT_MODAL_NAVIGATOR and RIGHT_MODAL_NAVIGATOR are displayed as full-screen views. For better performance, we should pause the lottie animation when a full-screen view is displayed

cc @MonilBhavsar