From 4722c4d0eb1890013d6693376ff655dd871798d1 Mon Sep 17 00:00:00 2001
From: Aleksandr Grenishin <nd0ut.me@gmail.com>
Date: Mon, 12 Feb 2024 15:59:19 +0300
Subject: [PATCH] fix(form-input): do not append `[]` postfix to input name
 when `multiple` is falsy (#602)

Co-authored-by: nd0ut <nd0ut@users.noreply.github.com>
---
 blocks/FormInput/FormInput.js    | 31 ++++++++++++++++++++-----------
 blocks/FormInput/data-output.css | 11 -----------
 demo/form.html                   |  6 +++---
 3 files changed, 23 insertions(+), 25 deletions(-)
 delete mode 100644 blocks/FormInput/data-output.css

diff --git a/blocks/FormInput/FormInput.js b/blocks/FormInput/FormInput.js
index 32997b0c1..5a65b49ef 100644
--- a/blocks/FormInput/FormInput.js
+++ b/blocks/FormInput/FormInput.js
@@ -22,9 +22,8 @@ export class FormInput extends UploaderBlock {
   initCallback() {
     super.initCallback();
 
-    const validationInput = this._createValidationInput();
-    this.appendChild(validationInput);
-    this._validationInputElement = validationInput;
+    this._validationInputElement = this._createValidationInput();
+    this.appendChild(this._validationInputElement);
 
     this.sub(
       '*collectionState',
@@ -43,38 +42,48 @@ export class FormInput extends UploaderBlock {
           this._dynamicInputsContainer.innerHTML = '';
 
           if (collectionState.status === 'uploading' || collectionState.status === 'idle') {
-            validationInput.value = '';
-            validationInput.setCustomValidity('');
+            this._validationInputElement.value = '';
+            this._validationInputElement.setCustomValidity('');
             return;
           }
 
           if (collectionState.status === 'failed') {
             const errorMsg = collectionState.errors[0]?.message;
-            validationInput.value = '';
-            validationInput.setCustomValidity(errorMsg);
+            this._validationInputElement.value = '';
+            this._validationInputElement.setCustomValidity(errorMsg);
             return;
           }
 
           const group = collectionState.group ? collectionState.group : null;
           if (group) {
-            validationInput.value = group.cdnUrl;
-            validationInput.setCustomValidity('');
+            this._validationInputElement.value = group.cdnUrl;
+            this._validationInputElement.setCustomValidity('');
             return;
           }
 
           const cdnUrls = collectionState.allEntries.map((entry) => entry.cdnUrl);
 
+          if (!this.cfg.multiple && cdnUrls.length === 1) {
+            this._validationInputElement.value = cdnUrls[0];
+            this._validationInputElement.setCustomValidity('');
+            return;
+          }
+
           // Remove validation input to prevent it from being submitted
-          validationInput.remove();
+          this._validationInputElement.remove();
           this._validationInputElement = null;
 
+          const fr = new DocumentFragment();
+
           for (let value of cdnUrls) {
             const input = document.createElement('input');
             input.type = 'hidden';
             input.name = `${this.ctxName}[]`;
             input.value = value;
-            this._dynamicInputsContainer.appendChild(input);
+            fr.appendChild(input);
           }
+
+          this._dynamicInputsContainer.replaceChildren(fr);
         }
       },
       false,
diff --git a/blocks/FormInput/data-output.css b/blocks/FormInput/data-output.css
deleted file mode 100644
index 5a323873a..000000000
--- a/blocks/FormInput/data-output.css
+++ /dev/null
@@ -1,11 +0,0 @@
-lr-form-input {
-  display: grid;
-}
-
-lr-form-input > input {
-  display: none;
-}
-
-lr-form-input > img {
-  height: 100px;
-}
diff --git a/demo/form.html b/demo/form.html
index f1b082104..08596c926 100644
--- a/demo/form.html
+++ b/demo/form.html
@@ -22,17 +22,17 @@
     const form = document.querySelector('form');
     form.addEventListener('submit', (e) => {
       e.preventDefault();
-      console.log('SUBMIT', e.target);
+      console.log('SUBMIT', [...new FormData(e.target).entries()]);
     });
   </script>
 </head>
 
-<lr-config ctx-name="my-uploader" pubkey="demopublickey" multiple multiple-min="2" multiple-max="3" img-only group-output></lr-config>
+<lr-config ctx-name="my-uploader" pubkey="demopublickey" multiple-min="1" multiple-max="10" img-only></lr-config>
 
 <form>
   <lr-file-uploader-regular style="position: relative; display: inline-block;" ctx-name="my-uploader" css-src="./blocks/themes/lr-basic/index.css">
     <lr-form-input
-      style="position: absolute; bottom: 0px; left: 50%"
+      style="position: absolute; bottom: 0px; left: 50%; pointer-events: none;"
       ctx-name="my-uploader"
     ></lr-form-input>
   </lr-file-uploader-regular>