[PAYMENT DUE 20 APRIL + BONUS FOR CREATING ISSUE] - mWeb/Web Safari - Selecting add attachment does not open the file picker

[kidroca]

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

---

Expected Result:

Selecting "Add Attachment" from the chat menu should open the Browser's file picker

Actual Result:

After pressing on "Add Attachment" the menu closes and focus is brought back to the chat input field

Action Performed:

1. Start the local dev server
2. Open or start a chat
3. Press on the plus button (+) inside the input field
4. Select "Add Attachment"

Workaround:

Use a different browser

Platform:

Where is this issue occurring?

Web❌
iOS
Android
Desktop App
Mobile Web ❌

Version Number: [email protected]
using the code in the master branch

Notes/Photos/Videos:

2021-03-26.18-32-00.mp4

• first part Safari
• second part Chrome

[kidroca]

Proposal

Doing a quick search on stackoverflow review that using: <input hidden /> or an input with display: none does not work for this purpose in Safari: https://stackoverflow.com/questions/28721679/trigger-the-file-input-prompt-with-a-hidden-label-element-safari

The suggested approach is to make the input invisible taking 0 width/height which would allow you to programatically trigger a click in all browsers.
We can further add an aria-hidden="true" attribute to remove the element from the accessibility API

I can also apply the fix for resetting the selected file listed here: #1159 as I've recreated the issue successfully

[Julesssss]

Confirmed this issue currently exists for prod on Safari.

[laurenreidexpensify]

@kidroca would you like to submit a PR to fix this via the solution you've proposed?

[kidroca]

Yes 👍

[kidroca]

I would like to extend the scope to also make sure a suitable options appear for mWeb:

Currently the functionality does not work at all on mWeb (tested Chrome and Safari) so I don't know what options appear for the current configuration of the file attachment

https://developers.google.com/web/fundamentals/media/capturing-images

---

@laurenreidexpensify How can I apply for this task on Upwork ?

[kidroca]

Bump @laurenreidexpensify
I haven't started to work on this as I'm not hired for this task on Upwork

[laurenreidexpensify]

hi @kidroca https://www.upwork.com/jobs/~01316cac66af339ce4 is now live - if you apply will make sure you're hired

[kidroca]

Thanks @laurenreidexpensify! I just did: https://www.upwork.com/ab/proposals/1377573217104883713

[laurenreidexpensify]

Excellent, Thanks, feel free to start the PR now

[laurenreidexpensify]

Assuming no regressions, will issue payment on 20 April @kidroca 👍🏽

[kidroca]

@laurenreidexpensify
Thank You Lauren!

Is each ticket managed individually, because this is the first time I see a message like that - none of my other issues with merged PRs would mention a payment due date. Should I worry?

[laurenreidexpensify]

Ah good catch @kidroca - the only reason that you're seeing this is, because unlike the other issues you've worked on, you created this one :) and usually all the back end management for this is taken care of in our private repos, where someone from Expensify will have first logged the issue being fixed.

So all in all nothing to worry about here, we're still in the beta phase of this, so do keep asking when you see anything that seems confusing to you from a process perspective, we greatly appreciate the feedback!

[laurenreidexpensify]

Paid and ended contract after no regressions 👍🏽 @kidroca also I will post that other update we discussed today in the Slack channel. Thanks for your work here!