fix(msp): File-Picker zuverlässig öffnen (visually-hidden statt hidden)

Beim Klick auf "Datei auswählen" passierte in manchen Browser-Setups
nichts, weil das versteckte <input type=file hidden> per display:none
aus dem Hit-Test verschwindet — und ein .click() darauf öffnet den
Native-Picker dann nicht.

Lösung: Standard "visually hidden"-Pattern (1px im Layout, geclippt,
nicht display:none). Damit funktioniert der programmatische Klick
zuverlässig, ohne dass der Input sichtbar ist.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
David Malinowski
2026-04-15 08:34:46 +02:00
co-authored by Claude Opus 4.6
parent 2847e4649f
commit a1ebe0481c
@@ -46,7 +46,7 @@ frappe.pages["import-dropzone"].on_page_load = function (wrapper) {
<button class="btn btn-primary btn-sm msp-dropzone__browse" type="button">
${__("Datei auswählen")}
</button>
<input type="file" class="msp-dropzone__input" multiple hidden
<input type="file" class="msp-dropzone__input msp-visually-hidden" multiple
accept=".csv,.zip,application/zip,application/x-zip-compressed,text/csv" />
</div>
</section>
@@ -677,6 +677,19 @@ function inject_style(root) {
.msp-dropzone__hint { font-size: 13px; color: var(--text-muted); }
.msp-dropzone__browse { margin-top: 8px; font-weight: 500; }
/* File-Input visuell ausblenden, aber im Layout halten — manche
Browser öffnen den Native-File-Picker nicht für display:none Inputs */
.msp-visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
pointer-events: none;
}
/* ---------- Upload-Cards ---------- */
.msp-cards {
display: flex; flex-direction: column; gap: var(--padding-sm);