[HOLD for #15289][$1000] If Action Menu is open, then Drag ad Drop in the report screen does not work.

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Navigate to any chat
2. Click +(Actions) from Composer
3. Now Drag any attachment to chat window

Expected Result:

Drag and Drop should work when the Action menu is open.

Actual Result:

Drag and Drop does not work if the Action modal is open

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: 1.2.98-2
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
Notes/Photos/Videos: Any additional supporting documentation

drag-and-drop-doesnt-work-on-modal-open.mov

Recording.209.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012e8154200f668718
• Upwork Job ID: 1646264709398183936
• Last Price Increase: 2023-04-12

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~012e8154200f668718

[MelvinBot]

Current assignee @Christinadobrzyn is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

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

[hoangzinh]

Proposal

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

If Action Menu is open, then Drag ad Drop in the report screen does not work

What is the root cause of that problem?

Currently Action Menu is rendered by Popover component, but it's not implemented properly. Popover is based on Modal, thus when it's displayed, there is a full-screen backdrop behind => The DragAndDrop component can not catch the drag & drop events

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

There are few of options:
Option 1: We can refactor Popover component it's truly Popover, and don't based on Modal => I recall this option is discussing and it's not easy to make decision & implement.
Option 2: We can replicate what we did for FAB popover here. More details, when Popover is visible, we listen on dragover event to automatically hide modal => it will remove full-screen backdrop. To narrow the scope, I think we can add those events into component ReportActionCompose.

During testing, I found out there are 2 places having similar issues:

• Emoji picker
• Context menu of a Report message
  
  
  => It can easily fix by same solution above

[Armedin]

Proposal

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

If Action Menu is open, then Drag and Drop in the report screen does not work.

What is the root cause of that problem?

The Popover component which is responsible for rendering the Action Menu, uses Modal under the hood. However, when Modal is active, the Modal's backdrop sits on top of all the other elements thus intercepting the event listeners attached to those elements.

This problem doesn't occur only in Action Menu, but also in other places where the PopoverMenu component is used; such as Emoji Menu.

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

Among many feasible solutions - the best option is to build a new component that detects when a dragover event happens in its child element. Let's call this component DragListener. The code will look something like this:

Then wrap the Action Menu with DragListener and simply set the menu visibility to false when a dragover event is detected.

Working solution

Untitled.mov

Similarly, all the Popover Menu components where a similar problem occurs can be wrapped with DragListener.

[MelvinBot]

📣 @Armedin! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Armedin]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01acc492375d3f53b0

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[situchan]

This might be fixed in #15289 which is popover refactor

[allroundexperts]

That's correct. This should be fixed after #15289 is implemented.

[Santhosh-Sellavel]

Thanks @situchan & @allroundexperts. As I still see it still has the help wanted label, @aimane-chnaif will this get handled on #15289 can you confirm?

[aimane-chnaif]

Thanks @situchan & @allroundexperts. As I still see it still has the help wanted label, @aimane-chnaif will this get handled on #15289 can you confirm?

Let's put this on HOLD rather than close since we've not picked up final solution yet. But will likely to go with popover refactor.

[aimane-chnaif]

cc: @dangrous

[Christinadobrzyn]

Changed Title and labeled this weekly while we wait for #15289 to be complete

[yuwenmemon]

Still on HOLD

[Christinadobrzyn]

back from ooo - thanks for handling this @zanyrenney I can take it off your plate!

Monitoring PR here - #22335 (comment) - gonna move to weekly while we wait for PR to be done

[Christinadobrzyn]

Monitoring - #22335 (comment)

[Christinadobrzyn]

Monitoring - #22335 (comment)

[Christinadobrzyn]

Monitoring - #22335 (comment)

[Christinadobrzyn]

Monitoring - #22335 (comment)

[Christinadobrzyn]

Monitoring - #22335 (comment)

[Christinadobrzyn]

Monitoring - #22335 (comment)

[Christinadobrzyn]

Monitoring - #22335 (comment)

[Christinadobrzyn]

#22335 (comment) is getting paid next Tuesday! I'll test this again tomorrow.

[Christinadobrzyn]

Tested the steps in the OP and I can confirm the drag and drop isn't working.

What do you think @Santhosh-Sellavel @aimane-chnaif @yuwenmemon @dangrous

Do you think we should move forward with this fix?

[allroundexperts]

@Christinadobrzyn Can you share a screen recording of it not working? It seems to work fine on my end. Thanks!

[aimane-chnaif]

This is not reproducible anymore and can be closed.

[zanyrenney]

Closing.

[jayeshmangwani]

@zanyrenney @Christinadobrzyn This Issue has been fixed in another issue, so am I eligible for reporting bonus or not for this issue?