[HOLD for payment 2022-08-01] [$250] Web - New Room - Drop down is opened again after use the Enter Key to create a new room

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

---

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with expensifail account
3. Click on Fub menu - New Room
4. Type any room and use Enter Key
5. Select any Workspace and use Enter Key
6. Select any Visibility option and use Enter Key

Expected Result:

Drop down should not open again after use Enter Key

Actual Result:

Drop down is opened again after use the Enter Key to create a new room

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.79.17

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any expensifail account

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Recording.729.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @MariaHCD (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MariaHCD]

Unable to reproduce on staging or on local on a mac:

Untitled_.Jul.7.2022.4_56.PM.mp4

But I am able to reproduce the issue on a windows device.

[melvin-bot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MitchExpensify]

Upwork Job

[melvin-bot]

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

[melvin-bot]

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

[eVoloshchak]

Proposal:
When user presses Enter (when this listener fires), we need to call event.preventDefault() so the browser will not handle this event and dropdown will stay closed

this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, (e) => {
    if (!this.props.isFocused || this.props.isDisabled || this.props.isLoading || (e && e.target.nodeName === 'TEXTAREA')) {
        return;
    }
+   e.preventDefault();
    this.props.onPress();
}, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true, false, this.props.enterKeyEventListenerPriority, false);

Before:

cinnamon-20220708-10.mp4

After:

cinnamon-20220708-11.mp4

Alternatively, if this somehow breaks usage of Button on other screens, we can do the same thing for this specific screen on WorkspaceNewRoomPage

validateAndCreatePolicyRoom(e) {
+   e.preventDefault();
    if (!this.validate()) {
        return;
    }

[melvin-bot]

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

[mananjadhav]

@eVoloshchak Went through your proposal and looks like preventDefault will fix it. I'd like to clarify the following:

Alternatively, if this somehow breaks usage of Button on other screens

1. Did you check if it breaks anything anywhere?
2. e.preventDefault can you confirm if this break anything on the mobile app side?

[eVoloshchak]

1. Did you check if it breaks anything anywhere?

Yes. I checked whatewer seemed logical to check, but I'm not used to navigating a site using keyboard, so I can't check all. In theory it shouldn't break anything, so I think we may add this change to Button, and in case it causes any regressions, move it to WorkspaceNewRoomPage

2. e.preventDefault can you confirm if this break anything on the mobile app side?

Keyboard shortcuts are disabled on native, so this listener will never be fired. But then the shorcuts will be added to native apps, it should work fine.

[mananjadhav]

I tested this on Desktop. I am not able to reproduce this on Mac, but once on Windows. @eVoloshchak's proposal looks good.

🎀 👀 🎀 C+ reviewed

cc - @marcochavezf

[marcochavezf]

Cool, thank you guys! Assigning @eVoloshchak 👍🏽

[melvin-bot]

📣 @eVoloshchak You have been assigned to this job by @marcochavezf!
Please apply to this job in Upwork 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 📖

[eVoloshchak]

PR is up

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[MitchExpensify]

Reminder to pay on August 1st assuming no regressions

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[MitchExpensify]

Paid @eVoloshchak, just waiting on @mananjadhav to accept the offer to process C+ payment then we'll close this out

[mananjadhav]

just waiting on @mananjadhav to accept the offer

Done @MitchExpensify

[MitchExpensify]

Paid and contracts ended, thanks everyone!