Leaflet: Safari: File upload form doesn't actually select file

[dstndstn]

Hi,

On Safari (only), when I add a form with a file element in it to a Leaflet map (control), when I click on the "Choose file" button, the file chooser comes up and I can select my file, but when the file dialog closes, it still shows "no file selected" -- the user's file selection doesn't show up!

Environment

• Leaflet version: 1.7.1
• Browser (with version): Safari 13.1.2
• OS/Platform (with version): Mac OSX 10.13.6

Minimal example reproducing the issue

https://plnkr.co/edit/tMMWmIsekrZjsQCt?preview

The file upload form WITHIN the map shows this error. The file upload form outside the map works.

Click on the "Choose file" button in the bottom-left; in the file dialog, select a file and click Choose; the selected filename does not appear in the file form element.

Thank you -- Leaflet is GREAT!
It powers this astronomical sky viewer: https://www.legacysurvey.org/viewer/

[IvanSanchez]

For the sake of clarity, the file upload <input> is created as follows:

var upload = L.control({'position':'bottomleft'});
upload.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'upload');
    this._div.innerHTML = 'File upload: <form action="upload" method="POST" enctype="multipart/form-data"><input type="file" name="file" /><input type="submit" value="Upload" /></form>';
    return this._div;
};
upload.addTo(map);

Might be one of these Safari webkit engine bugs where setting some CSS property messes up form inputs. Will have to wait until somebody with OSX+Safari 13 can have a deeper look at what's going on.

[dstndstn]

For what it's worth, I also see this in Safari 14.0 on OSX 10.15.7.

I'm afraid I am not an experienced javascript dev nor Safari user, but if anyone can give me instructions about what to look for, I can poke around in the dev console. I can tell you there are no Javascript Console messages. I poked around in the CSS attribs but honestly I wouldn't notice if something were wrong.

[IvanSanchez]

Hard to say. This and https://github.com/Leaflet/Leaflet/issues/7255 might share a common cause, so I'm partial to focusing on #7255 first, and see if this is reproducible afterwards.

[johnd0e]

@dstndstn
Try to set map option tap to false.

[dstndstn]

That works!!

[johnd0e]

So this bug is related to #7255 as @IvanSanchez said.

Note that without 'tap' you currently loose contextmenu event in mobile safari.