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

@gadhiyamanan

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:

Go to any chat
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?

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

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

@johncschuster

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

@0xmiroslav

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

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);
    };

@ishpaul777

@ishpaul777 are you able to reproduce in latest main?

@0xmiroslav

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

@johncschuster

@johncschuster we can close this

@0xmiroslav

@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

@ishpaul777

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

@0xmiroslav

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.73-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix remove dragover listner when popover hides #27649

If no regressions arise, payment will be issued on 2023-10-02. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@0xmiroslav requires payment offer (Reviewer)
@ishpaul777 requires payment offer (Contributor)
@gadhiyamanan requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

@johncschuster

Hey! @johncschuster! gentle bump for payment! Thanks

This was just code optimization, originally console error. So we can skip BZ checklist here.

Payment has been issued to everyone! Thanks!

@johncschuster

Hey @johncschuster,thank for sending payment, I think the PR is eligible for bonus as #27375 (comment)

cc @srikarparsi

@johncschuster

gentle bump @johncschuster on above ^, thanks!

@johncschuster

Reopening to make sure that @johncschuster sees the Q about bonus

@0xmiroslav

Urgency bonus has been issued to @0xmiroslav and @ishpaul777

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Proposal

Problem

Root Cause

Changes

26 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Sep 13, 2023

melvin-bot commented on Sep 13, 2023

melvin-bot commented on Sep 13, 2023

ishpaul777 commented on Sep 13, 2023

Proposal

Problem

Root Cause

Changes

0xmiroslav commented on Sep 13, 2023

ishpaul777 commented on Sep 13, 2023

0xmiroslav commented on Sep 13, 2023

ishpaul777 commented on Sep 13, 2023

0xmiroslav commented on Sep 13, 2023

26 remaining items

melvin-bot commented on Sep 25, 2023

ishpaul777 commented on Oct 3, 2023

0xmiroslav commented on Oct 3, 2023

johncschuster commented on Oct 4, 2023

ishpaul777 commented on Oct 5, 2023

ishpaul777 commented on Oct 8, 2023

sonialiap commented on Oct 9, 2023

johncschuster commented on Oct 9, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions