[BUG][UI]: Double-Selection Required for CA Certificate File Upload In Gateways

[msureshkumar88]

🐞 Bug Summary

In the admin panel's Gateway creation form, users must select the file input twice to successfully select a CA certificate file for upload. The first click does not trigger the file selection .

---

🧩 Affected Component

• mcpgateway - UI (admin panel)

---

🔁 Steps to Reproduce

1. Navigate to admin panel at /admin/#gateways
2. Locate the "Upload CA certificate" section in the Gateway creation form
3. Click on the upload drop zone area (the dashed border box with "Click to upload or drag and drop" text)
4. Observe: File selection dialog open once and select CA file once
5. Observe: File selection dialog open again CA file should be selected again
6. File to be selected twice to successfully select the CA file

---

🤔 Expected Behavior

The file should be selected at one go rather than selecting file twice in file selection windows, allowing users to select their CA certificate file (.pem, .crt, .cer, .cert) without requiring multiple selections

---

📓 Logs / Error Output

No console errors are generated. The issue is a UI interaction problem where the onclick handler on the drop zone div (line 6038 in admin.html) may be experiencing event propagation or timing issues.

---

🧠 Environment Info

Key	Value
Component	Admin UI - Gateway Creation Form
File	mcpgateway/templates/admin.html
Lines	6026-6039
Input Element	upload-ca-certificate
Handler	onclick="document.getElementById('upload-ca-certificate').click()"

---

🧩 Additional Context

Root Cause Analysis:
The issue is in the file upload implementation at admin.html:6038:

<div
  id="ca-certificate-upload-drop-zone"
  class="border-2 border-dashed ... cursor-pointer"
  onclick="document.getElementById('upload-ca-certificate').click()"
>

The hidden file input at admin.html:6026-6034 has an onchange event handler that calls validateCACertFiles(event), which may be interfering with the click event propagation or causing the first click to be consumed by validation logic.

Potential Causes:

1. Event handler conflict between onclick on the drop zone and onchange on the file input
2. The validateCACertFiles(event) function may be preventing default behavior or stopping propagation
3. Browser-specific timing issue with programmatic .click() calls on hidden file inputs
4. Possible CSS or z-index layering issue preventing the first click from reaching the handler

Similar Patterns:
Other file upload implementations in the same file (e.g., bulk import at line 3709, dropdown import at line 14160) use similar patterns but may not exhibit the same issue, suggesting this is specific to the CA certificate upload section.