From 19da9b9f9f166190a71e86c18599bc8fc6b7165f Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 8 Apr 2026 21:17:50 +0200
Subject: [PATCH] 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>
---
 ui/src/pages/AppsTab/AppsTab.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/ui/src/pages/AppsTab/AppsTab.tsx b/ui/src/pages/AppsTab/AppsTab.tsx
index 3d506e7a..c4fb0c02 100644
--- a/ui/src/pages/AppsTab/AppsTab.tsx
+++ b/ui/src/pages/AppsTab/AppsTab.tsx
@@ -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>