fix: use opacity-based hidden input for file upload instead of display:none
All checks were successful
CI / cleanup-branch (push) Has been skipped
CI / build (push) Successful in 1m25s
CI / docker (push) Successful in 1m14s
CI / deploy-feature (push) Has been skipped
CI / deploy (push) Successful in 38s

Some browsers block programmatic .click() on display:none inputs.
Using position:absolute + opacity:0 keeps the input in the render tree.
Also added type="button" to prevent any form-submission interference.
Applied to both create page and detail view file inputs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-08 21:17:50 +02:00
parent 8b3c4ba2fe
commit 19da9b9f9f

View File

@@ -302,9 +302,10 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
<span className={styles.configLabel}>Application JAR</span>
<div className={styles.fileRow}>
<input ref={fileInputRef} type="file" accept=".jar" style={{ display: 'none' }}
<input ref={fileInputRef} type="file" accept=".jar"
style={{ position: 'absolute', width: 0, height: 0, opacity: 0, overflow: 'hidden' }}
onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
<Button size="sm" variant="secondary" onClick={() => fileInputRef.current?.click()} disabled={busy}>
<Button size="sm" variant="secondary" type="button" onClick={() => fileInputRef.current?.click()} disabled={busy}>
{file ? 'Change file' : 'Select JAR'}
</Button>
{file && <span className={styles.fileName}>{file.name} ({formatBytes(file.size)})</span>}
@@ -539,8 +540,10 @@ function AppDetailView({ appId, environments, selectedEnv }: { appId: string; en
</div>
</div>
<div className={styles.detailActions}>
<input ref={fileInputRef} type="file" accept=".jar" style={{ display: 'none' }} onChange={handleUpload} />
<Button size="sm" variant="primary" onClick={() => fileInputRef.current?.click()} loading={uploadJar.isPending}>Upload JAR</Button>
<input ref={fileInputRef} type="file" accept=".jar"
style={{ position: 'absolute', width: 0, height: 0, opacity: 0, overflow: 'hidden' }}
onChange={handleUpload} />
<Button size="sm" variant="primary" type="button" onClick={() => fileInputRef.current?.click()} loading={uploadJar.isPending}>Upload JAR</Button>
<Button size="sm" variant="danger" onClick={() => setDeleteConfirm(true)}>Delete App</Button>
</div>
</div>