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

[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

[CyberAndrii]

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?

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