From b5c099b15ac75b67961bf9967deb141b6bb5e06c Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 9 Jul 2020 17:14:01 +0200
Subject: [PATCH] Remove empty strings from repeatable textstrings whitespace
 (#8269)

---
 .../multipletextbox.controller.js             | 39 ++++++++++++-------
 .../multipletextbox/multipletextbox.html      | 18 ++++++---
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js
index aaf41f3083..42ce10c519 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js
@@ -17,7 +17,7 @@
         $scope.model.value = [];
     }
 
-    //add any fields that there isn't values for
+    // Add any fields that there isn't values for
     if ($scope.model.config.min > 0) {
         for (var i = 0; i < $scope.model.config.min; i++) {
             if ((i + 1) > $scope.model.value.length) {
@@ -37,7 +37,7 @@
                 if ($scope.model.config.max <= 0 && txtBoxValue.value || $scope.model.value.length < $scope.model.config.max && txtBoxValue.value) {
                     var newItemIndex = index + 1;
                     $scope.model.value.splice(newItemIndex, 0, { value: "" });
-                    //Focus on the newly added value
+                    // Focus on the newly added value
                     $scope.model.value[newItemIndex].hasFocus = true;
                 }
                 break;
@@ -47,7 +47,7 @@
                     var remainder = [];
 
                     // Used to require an extra hit on backspace for the field to be removed
-                    if(txtBoxValue.value === "") {
+                    if (txtBoxValue.value === "") {
                         backspaceHits++;
                     } else {
                         backspaceHits = 0;
@@ -64,11 +64,11 @@
 
                         var prevItemIndex = index - 1;
 
-                        //Set focus back on false as the directive only watches for true
-                        if(prevItemIndex >= 0) {
+                        // Set focus back on false as the directive only watches for true
+                        if (prevItemIndex >= 0) {
                             $scope.model.value[prevItemIndex].hasFocus = false;
                             $timeout(function () {
-                                //Focus on the previous value
+                                // Focus on the previous value
                                 $scope.model.value[prevItemIndex].hasFocus = true;
                             });
                         }
@@ -81,12 +81,13 @@
             default:
         }
         validate();
-    }
+    };
 
     $scope.add = function () {
         if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) {
             $scope.model.value.push({ value: "" });
-            // focus new value
+
+            // Focus new value
             var newItemIndex = $scope.model.value.length - 1;
             $scope.model.value[newItemIndex].hasFocus = true;
         }
@@ -106,7 +107,7 @@
         $scope.model.value = remainder;
     };
 
-    $scope.showPrompt = function (idx, item){
+    $scope.showPrompt = function (idx, item) {
 
         var i = $scope.model.value.indexOf(item);
 
@@ -114,11 +115,11 @@
         if (i === idx) {
             $scope.promptIsVisible = i;
         }
-    }
+    };
 
-    $scope.hidePrompt = function(){
+    $scope.hidePrompt = function () {
         $scope.promptIsVisible = "-1";
-    }
+    };
 
     function validate() {
         if ($scope.multipleTextboxForm) {
@@ -126,10 +127,22 @@
             $scope.multipleTextboxForm.mandatory.$setValidity("minCount", !invalid);
         }
     }
+
     $timeout(function () {
         validate();
     });
-    
+
+    // We always need to ensure we dont submit anything broken
+    var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
+        
+        // Filter to items with values
+        $scope.model.value = $scope.model.value.filter(el => el.value.trim() !== "") || [];
+    });
+
+    // When the scope is destroyed we need to unsubscribe
+    $scope.$on('$destroy', function () {
+        unsubscribe();
+    });
 }
 
 angular.module("umbraco").controller("Umbraco.PropertyEditors.MultipleTextBoxController", MultipleTextBoxController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
index 85221c61f7..baee286924 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
@@ -2,14 +2,18 @@
   <ng-form name="multipleTextboxForm">
     <div ui-sortable="sortableOptions" ng-model="model.value">
       <div class="flex flex-wrap textbox-wrapper" ng-repeat="item in model.value track by $index">
-          <input type="text" name="item_{{$index}}" ng-model="item.value" class="umb-property-editor umb-textstring textstring flx-i"
-                 ng-keyup="addRemoveOnKeyDown($event, $index)" focus-when="{{item.hasFocus}}"/>
+          <input type="text" name="item_{{$index}}" ng-model="item.value"
+                 class="umb-property-editor umb-textstring textstring flx-i"
+                 ng-trim="false"
+                 ng-keyup="addRemoveOnKeyDown($event, $index)"
+                 focus-when="{{item.hasFocus}}" />
+
           <div class="icon-wrapper">
               <i class="icon icon-navigation handle" localize="title" title="@general_move"></i>
   
               <div class="umb-multiple-textbox__confirm" ng-show="model.value.length > model.config.min">
-                  <button class="umb-multiple-textbox__confirm-action" type="button" prevet-default ng-click="showPrompt($index, item)" localize="title" title="@content_removeTextBox">
-                      <i class="icon-trash"></i>
+                  <button type="button" class="umb-multiple-textbox__confirm-action" ng-click="showPrompt($index, item)" localize="title" title="@content_removeTextBox">
+                      <i class="icon-trash" aria-hidden="true"></i>
                   </button>
   
                   <umb-confirm-action
@@ -22,11 +26,13 @@
           </div>
       </div>
     </div>
-    <a prevent-default href="" class="add-link" localize="title" title="@content_addTextBox"
+
+    <button type="button" class="add-link" localize="title" title="@content_addTextBox"
        ng-show="model.config.max <= 0 || model.value.length < model.config.max"
        ng-click="add()">
         <localize key="general_add">Add</localize>
-    </a>
+    </button>
+
     <input type="hidden" name="mandatory" ng-model="model.value" />
   </ng-form>
 </div>