[HOLD for payment 2023-09-21] [$1000] dev: ESC keyboard shortcut shows up in modal on second render on login page

[kavimuru]

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. signout if you are logged in
2. refresh the page
3. press cmd+j to open shortcut modal
4. now close the modal and observe content while it closes
5. now open it again

Expected Result:

ESC shortcut should always be shown in the modal

Actual Result:

ESC shortcut is visible for a brief moment while shortcut modal closes, later it is shown consistently

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.55-7
Reproducible in staging?: Yes
Reproducible in production?: Yes
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-08-08.at.4.52.04.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @chiragxarora
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1691493991739999

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a6b0de738da985ac
• Upwork Job ID: 1693559881555742720
• Last Price Increase: 2023-08-21
• Automatic offers:
• mollfpr | Reviewer | 26508978
• chiragxarora | Reporter | 26508980

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[kavimuru]

Proposal by @chiragxarora

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

ESC keyboard shortcut shows up in modal on second render on login page

What is the root cause of that problem?

Root cause of this issue is as follows:
We add shortcuts to the modal via documentedShortcuts object and a shortcut gets added to it only when that shortcut is subscribed here in subscribe function

App/src/libs/KeyboardShortcut/index.js

Lines 135 to 142 in fdcae9f

	if (descriptionKey) {
	documentedShortcuts[displayName] = {
	shortcutKey: key,
	descriptionKey,
	displayName,
	modifiers,
	};
	}

Now coming to the modal, we are subscribing to the ESC shortcut inside subscribeOpenModalShortcuts function here

App/src/components/KeyboardShortcutsModal.js

Lines 49 to 56 in fdcae9f

	const subscribeOpenModalShortcuts = () => {
	// Allow closing the modal with the both Enter and Escape keys
	// Both callbacks have the lowest priority (0) to ensure that they are called before any other callbacks
	// and configured so that event propagation is stopped after the callback is called (only when the modal is open)
	subscribedOpenModalShortcuts.current = [
	KeyboardShortcut.subscribe(
	closeShortcutEscapeModalConfig.shortcutKey,

And from when the page loads till the point we open the modal once using CMD+J, this piece of code never executes because isShortcutsModalOpen remains false till that point

App/src/components/KeyboardShortcutsModal.js

Lines 128 to 131 in fdcae9f

	if (isShortcutsModalOpen) {
	// The modal started open, which can happen if you reload the page when the modal is open.
	subscribeOpenModalShortcuts();
	}

same case with second useEffect, where it always lands in the else object

App/src/components/KeyboardShortcutsModal.js

Lines 143 to 152 in fdcae9f

	useEffect(() => {
	if (isShortcutsModalOpen) {
	subscribeOpenModalShortcuts();
	} else {
	// Modal is closing, remove keyboard shortcuts
	unsubscribeOpenModalShortcuts();
	}
	// subscribeOpenModalShortcuts and unsubscribeOpenModalShortcuts functions are not added as dependencies since they don't change between renders
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isShortcutsModalOpen]);

Thus the ESC shortcut is never subscribed until we open the modal once on login screen, unlike other places

Now once you open the modal, it gets subscribed, and now when you close it, you get to see the ESC shortcut for a brief moment and after that, we see it whenever we open the modal

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

We need to subscribe to openmodal shortcuts without any condition on modal mounting which essentially means the following changes:

replacing this

App/src/components/KeyboardShortcutsModal.js

Lines 128 to 131 in fdcae9f

	if (isShortcutsModalOpen) {
	// The modal started open, which can happen if you reload the page when the modal is open.
	subscribeOpenModalShortcuts();
	}

with this

subscribeOpenModalShortcuts();

Results

What alternative solutions did you explore? (Optional)

None

[Charan-hs]

While reproducing this issue, I found another related bug.

BUG

When logging out or signing out, the system will redirect to the login page. Now press CMD+j, we can see All shortcuts. Note that the list will disappear after reloading.

with.bug.shortcut.mp4

should I report this in #expensify-bugs ?

[chiragxarora]

Yes, I kept this in notes too, felt unrelated to this so didn't add it here

[Charan-hs]

Proposal

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

ESC keyboard shortcut shows up in modal on second render on login page

What is the root cause of that problem?

App/src/components/KeyboardShortcutsModal.js

Line 44 in fdcae9f

const shortcuts = KeyboardShortcut.getDocumentedShortcuts();

When the components load (initial), we call the function KeyboardShortcut.getDocumentedShortcuts() and store the result in the constant variable shortcuts. In useEffect we are callingsubscribeOpenModalShortcuts() subscribe function but fail to handle any changes in the shortcuts variable. Based on changes we are not rendering it.

For this #25448 (comment) cause is

App/src/libs/KeyboardShortcut/index.js

Lines 83 to 87 in fdcae9f

	*/
	function unsubscribe(displayName, callbackID) {
	eventHandlers[displayName] = _.reject(eventHandlers[displayName], (callback) => callback.id === callbackID);
	}

When unsubscribing, we remove event listeners but not shortcuts from the variable documentedShortcuts.

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

App/src/components/KeyboardShortcutsModal.js

Line 44 in fdcae9f

const shortcuts = KeyboardShortcut.getDocumentedShortcuts();

we can handle shortcuts variable with UseState function so it will take care the onChanges render issue.

    const [shortcuts,setShortcurts] = useState([])

In these two places call SetState Function along with subscribeOpenModalShortcuts()

App/src/components/KeyboardShortcutsModal.js

Lines 143 to 146 in fdcae9f

	useEffect(() => {
	if (isShortcutsModalOpen) {
	subscribeOpenModalShortcuts();
	} else {

App/src/components/KeyboardShortcutsModal.js

Lines 127 to 131 in fdcae9f

	if (isShortcutsModalOpen) {
	// The modal started open, which can happen if you reload the page when the modal is open.
	subscribeOpenModalShortcuts();
	}

if (isShortcutsModalOpen) {
            subscribeOpenModalShortcuts();
            setShortcurts(KeyboardShortcut.getDocumentedShortcuts())

        } 

We are setting the state when the modal is opened, Once the component unmounts reset the state.

bug.resolved.shortcut.mp4

[Charan-hs]

Yes, I kept this in notes too, felt unrelated to this so didn't add it here

I apologize, but I could not locate any information pertaining to the subject you mentioned.

[chiragxarora]

I mean I kept it in my personal notes, did not mention that here since it appeared different

[Charan-hs]

for this #25448 (comment)
here

App/src/libs/KeyboardShortcut/index.js

Lines 83 to 87 in fdcae9f

	*/
	function unsubscribe(displayName, callbackID) {
	eventHandlers[displayName] = _.reject(eventHandlers[displayName], (callback) => callback.id === callbackID);
	}

we can remove the shortcuts based on the display name when unsubscribing

    documentedShortcuts = _.omit(documentedShortcuts,displayName);

[melvin-bot]

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