[$500] Android - Rooms can be created when the user presses the Return key while typing in the description

[kbecciv]

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: 1.4.42.0
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Launch the app
2. Log in with your account
3. Tap on Plus green button
4. Select Start Chat - Room
5. Enter room name
6. On description, use any text and hit Return key on Samsung device

Expected Result:

Room should not be created

Actual Result:

Rooms can be created when the user presses the Return key while typing in the description

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen_Recording_20240215_131957_New.Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fe10c08e956825df
• Upwork Job ID: 1758204974898151424
• Last Price Increase: 2024-03-14

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[neonbhai]

Proposal

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

Rooms can be created when the user presses the Return key while typing in the description

What is the root cause of that problem?

We don't disable pressing the submit button on enter here

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

We should change disable press on enter to true

Alternatively

We can remove the prop

[eucool]

Proposal

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

Rooms can be created when the user presses the Return key while typing in the description

What is the root cause of that problem?

We do not define the type of functionality for enter button for the description InputWrapper:

App/src/pages/workspace/WorkspaceNewRoomPage.js

Lines 312 to 322 in 23b749a

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.REPORT_DESCRIPTION}
	label={translate('reportDescriptionPage.roomDescriptionOptional')}
	accessibilityLabel={translate('reportDescriptionPage.roomDescriptionOptional')}
	role={CONST.ACCESSIBILITY_ROLE.TEXT}
	autoGrowHeight
	maxLength={CONST.REPORT_DESCRIPTION.MAX_LENGTH}
	autoCapitalize="none"
	containerStyles={[styles.autoGrowHeightMultilineInput]}
	/>

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

pass a default prop (React documentation) returnKeyType and set it to done:

<InputWrapper 
     InputComponent={TextInput} 
     inputID={INPUT_IDS.REPORT_DESCRIPTION} 
     returnKeyType='done'

What alternative solutions did you explore? (Optional)

N/A

[Krishna2323]

Proposal

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

Rooms can be created when the user presses the Return key while typing in the description

What is the root cause of that problem?

The issue seems device specific, not reproducible on emulator, but I believe it can be solved if we pass the props below conditionally.

App/src/pages/workspace/WorkspaceNewRoomPage.js

Line 299 in 23b749a

disablePressOnEnter={false}

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

We should pass false if DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth is true.

disablePressOnEnter={DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth}

Additionally we can also check for platform !== 'android'.

Result

[agent3bood]

Proposal

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

Android - Rooms can be created when the user presses the Return key while typing in the description

What is the root cause of that problem?

The component tha listens for Enter keyboard shortcut is not able to detect the description field as multiline.
Look here
while the web implementation for validateSubmitShortcut is skipping this event when `eventTarget.nodeName === 'TEXTAREA'
the native implementation does not have any information of the event or what type of element is focused.

To know which input is focus we can use FormContext to store that info.

<InputWrapper
  InputComponent={TextInput}
  inputID={INPUT_IDS.REPORT_DESCRIPTION}
  onTouched={} // here
  onBlur={} // here

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

Update KeyboardShortcutComponent and add new arg isMultiline
and use that in the validateSubmitShortcut function.

Because the keyboardShortcutComponent is only used locally this change will not break other parts of the app, and it will be the expected behaviour to not submit the form when the user presses Enter while typing in a multiline field.

What alternative solutions did you explore? (Optional)

• Check if bindHandlerToKeydownEvent emit any useful information when the enter key is pressed on native, the event was just undefined.
• Tyr to get the focused node and figure out if it is a multiline field, but native do not support focus.