[HOLD for payment 2023-10-02] [$500] DEV - Web - Console error when user try to drag and drop attachment

[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 any chat
2. Drag any attachment and hover on header of chat

Expected Result:

It should not show any console error

Actual Result:

Console error appears (Uncaught TypeError: Cannot read properties of null (reading 'hideCreateMenu') )

Workaround:

Unknown

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: Dev 1.3.67-0
Reproducible in staging?: n
Reproducible in production?: n
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-09-11.at.12.08.00.PM.mov

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016eba922aef37e232
• Upwork Job ID: 1702001522393657344
• Last Price Increase: 2023-09-13
• Automatic offers:
• 0xmiroslav | Reviewer | 26722904
• ishpaul777 | Contributor | 26722905
• gadhiyamanan | Reporter | 26722906

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016eba922aef37e232

[melvin-bot]

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

[melvin-bot]

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

[ishpaul777]

Proposal

Problem

DEV - Web - Console error when user try to drag and drop attachment

Root Cause

We are initalizing the popover modal ref with null, and dont have a condition to return if popoverModal.current is null when adding/removing dragover listner resulting in a console error when popovermodal ref is null

Changes

modify SidebarScreen to only execute hideCreateMenu if popoverModal.current

    const onHideMenu = useCallback(() => {
        console.log('Hiding create menu');
        if (popoverModal.current) {
            popoverModal.current.hideCreateMenu();
        }
    }, []);


    /**
     * Method create event listener
     */
    const createDragoverListener = () => {
        document.addEventListener('dragover', onHideMenu);
    };

    /**
     * Method remove event listener.
     */
    const removeDragoverListener = () => {
        document.removeEventListener('dragover', onHideMenu);
    };

[0xmiroslav]

@ishpaul777 are you able to reproduce in latest main?

[ishpaul777]

@0xmiroslav just pulled main and checked issue is not reproducable.

[0xmiroslav]

@johncschuster we can close this

[ishpaul777]

@0xmiroslav I think the issue here is even though we want to remove the eventlistner when removeDragoverListener is executed the listner never removed because we are passing anonymous while adding and removing listner.

Add a console.log in addEventListner, you will realize dragover listner is not removerd when FAB menu is closed.

document.addEventListener('dragover', () => {
            console.log('dragover')
            popoverModal.current.hideCreateMenu()
        });

more info - https://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working

[0xmiroslav]

@ishpaul777 I am not convinced about your analysis. How does it affect the app?