fix: use opacity-based hidden input for file upload instead of display:none
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user