From 32ec78fb8b531d1a8c2192daba1781d9be22a2d8 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Sun, 14 Dec 2025 18:10:39 +0100
Subject: [PATCH] Update ItemAddEdit UX (#1404)

---
 .../popup/pages/credentials/ItemAddEdit.tsx            | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/browser-extension/src/entrypoints/popup/pages/credentials/ItemAddEdit.tsx b/apps/browser-extension/src/entrypoints/popup/pages/credentials/ItemAddEdit.tsx
index cb5926482..ad6ddfa80 100644
--- a/apps/browser-extension/src/entrypoints/popup/pages/credentials/ItemAddEdit.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/pages/credentials/ItemAddEdit.tsx
@@ -957,7 +957,8 @@ const ItemAddEdit: React.FC = () => {
 
     // Handle multi-value fields
     if (isMultiValue) {
-      const values = Array.isArray(value) ? value : value ? [value] : [''];
+      // Ensure at least one empty input is always shown for multi-value fields
+      const values = Array.isArray(value) && value.length > 0 ? value : value ? [value as string] : [''];
 
       return (
         <div className="space-y-2">
@@ -973,9 +974,12 @@ const ItemAddEdit: React.FC = () => {
                 onChange={(e) => {
                   const newValues = [...values];
                   newValues[idx] = e.target.value;
+                  /*
+                   * Filter empty values but keep raw value for storage (empty array is fine).
+                   * The UI will still show at least one input due to the values initialization above.
+                   */
                   handleFieldChange(fieldKey, newValues.filter(v => v.trim() !== ''));
                 }}
-                placeholder={`${label} ${idx + 1}`}
                 className="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white"
               />
               {idx === values.length - 1 && (
@@ -1061,7 +1065,6 @@ const ItemAddEdit: React.FC = () => {
               onChange={(e) => handleFieldChange(fieldKey, e.target.value)}
               rows={4}
               className={`w-full px-3 py-2 ${onRemove ? 'pr-10' : ''} border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white`}
-              placeholder={label}
             />
           </div>
         );
@@ -1109,7 +1112,6 @@ const ItemAddEdit: React.FC = () => {
             value={stringValue}
             onChange={(value) => handleFieldChange(fieldKey, value)}
             type="text"
-            placeholder={label}
           />
         );
     }