[HOLD for payment 2022-08-11] [$500] Chat - Safari - Drag & Drop - Little "+ copy" icon doesn't appear consistently on Safari

[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. Access staging.new.expensify.com
2. Sign into a valid account
3. Open any chat
4. Drag & Drop an image within the chat

Expected Result:

The user expects to see the "+" icon so that they know that this image can be uploaded this way

Actual Result:

On Safari, The "+" icon does not show unless the user quickly moves the cursor
Note: The "+" icon appears consistently on Chrome browser and on Desktop app

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web Mac Safari
• Desktop App

Version Number:

Reproducible in staging?:

Reproducible in production?:

Email or phone of affected tester (no customers):

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

Notes/Photos/Videos:
Both videos of Safari and chrome added

Bug5613718_Plus_icon_on_MAC_Chrome.mp4

Bug5613718_Drag_and_Drop_on_Safari.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 @srikarparsi (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[srikarparsi]

Did a little investigating, bug is for all files, not just images on safari

[melvin-bot]

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

[puneetlath]

External Upwork job: https://www.upwork.com/jobs/~01b4c3fac00064e2ed
Internal Upwork job: https://www.upwork.com/ab/applicants/1547326531942969344/job-details

[melvin-bot]

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

[melvin-bot]

Current assignee @puneetlath is eligible for the Exported assigner, not assigning anyone new.

[puneetlath]

Still waiting for proposals. Upping to $500.

[andrewlor]

Proposal

Issue

For some reason calling e.preventDefault() when handling the dragover event unsets the cursor style in safari. I confirmed this by commenting out e.preventDefault(), and the cursor style was working as expected.

Solution

e.preventDefault() is there for another reason, so we don't want to remove that. But it seems like setting the dropEffect on each dragover event works. This event fires continuously as the cursor is dragging over the document. Currently the dropEffect is just set once on dragenter and the cursor enters the document.

App/src/components/Composer/index.js

Lines 197 to 217 in d9efe6b

	dragNDropListener(e) {
	let isOriginComposer = false;
	const handler = () => {
	switch (e.type) {
	case 'dragover':
	e.preventDefault();
	this.props.onDragOver(e, isOriginComposer);
	break;
	case 'dragenter':
	e.dataTransfer.dropEffect = 'copy';
	this.props.onDragEnter(e, isOriginComposer);
	break;
	case 'dragleave':
	this.props.onDragLeave(e, isOriginComposer);
	break;
	case 'drop':
	this.props.onDrop(e, isOriginComposer);
	break;
	default: break;
	}
	};

case 'dragover':
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';  // add this line
    this.props.onDragOver(e, isOriginComposer);
    break;

Result

demo.mov

[parasharrajat]

@andrewlor Idea looks good to me. Could you please show us how will you do that?

We have an automated and standardized way how to handle the proposals, which helps us to stay efficient and on top of things. I would recommend checking out some we have an automated and standardized way how to handle the proposals, which helps us to stay efficient and on top of things. I would recommend checking out some previous jobs, which already got a contributor assigned to see how they posted the proposals. There is also this part in our contributor guidelines which you might find useful.

Please, also share the exact changes in code you had to make to fix this issue. You can see from all the other issues and contributors that we won't just take the code and run away, no need to worry about that :)

Thank you!

[andrewlor]

@parasharrajat I updated my proposal with more details, and actually found a slightly better solution. Please let me know if there is anything else you need, otherwise I'll wait to move forward with the PR.

[parasharrajat]

otherwise I'll wait to move forward with the PR.

Go through the Contributing guidelines https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md to understand the process.

[andrewlor]

Pause at this step until someone from the Contributor-Plus team and / or someone from Expensify provides feedback on your proposal (do not create a pull request yet).
If your solution proposal is accepted by the Expensify engineer assigned to the issue, Expensify will hire you on Upwork and assign the GitHub issue to you.

At this point I am waiting for the proposal to be accepted? As I understand it I'm waiting for the github issue to be assigned to me and to be hired on upwork before creating the PR. Not sure what I'm missing.

[parasharrajat]

Not sure what I'm missing.

Nothing, you are on track. 👍

Looks like your proposal is what I was expecting. @andrewlor's proposal looks good to me.

@andrewlor Please test your solution on all possible platforms including different browsers(Firefox, chrome, safari).

cc: @puneetlath

🎀 👀 🎀 C+ reviewed

[andrewlor]

Testing on all platforms. I could check on ios/android/mweb to make sure there isn't any regression while attaching files, but I'm pretty sure this should not be applicable as it should not be possible to drag and drop.

chrome.mov

desktop.mov

firefox.mov

safari.mov

[parasharrajat]

cc: @puneetlath #9485 (comment)

[puneetlath]

Sounds simple and straightforward to me.

[melvin-bot]

📣 @andrewlor You have been assigned to this job by @puneetlath!
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 📖

[melvin-bot]

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

• Fix Issue 9485: Drag & Drop plus icon doesn't appear on Safari #10126

If no regressions arise, payment will be issued on 2022-08-11. 🎊

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[puneetlath]

Paid @andrewlor. Sent C+ contract to @parasharrajat.

[puneetlath]

Everyone paid. Thanks for your contributions everyone!