Merge pull request #2048 from umbraco/temp-U4-7497

Pressing Enter/Backspace in repeatable text strings now adds/removes text boxes

src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js

@@ -1,4 +1,6 @@
-function MultipleTextBoxController($scope) {
+function MultipleTextBoxController($scope, $timeout) {
+
+    var backspaceHits = 0;
 
     $scope.sortableOptions = {
         axis: 'y',
@@ -11,7 +13,7 @@
     if (!$scope.model.value) {
         $scope.model.value = [];
     }
-    
+
     //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++) {
@@ -21,13 +23,72 @@
         }
     }
 
+    $scope.addRemoveOnKeyDown = function (event, index) {
+
+        var txtBoxValue = $scope.model.value[index];
+
+        event.preventDefault();
+
+        switch (event.keyCode) {
+            case 13:
+                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
+                    $scope.model.value[newItemIndex].hasFocus = true;
+                }
+                break;
+            case 8:
+
+                if ($scope.model.value.length > $scope.model.config.min) {
+                    var remainder = [];
+
+                    // Used to require an extra hit on backspace for the field to be removed
+                    if(txtBoxValue.value === "") {
+                        backspaceHits++;
+                    } else {
+                        backspaceHits = 0;
+                    }
+
+                    if (txtBoxValue.value === "" && backspaceHits === 2) {
+                        for (var x = 0; x < $scope.model.value.length; x++) {
+                            if (x !== index) {
+                                remainder.push($scope.model.value[x]);
+                            }
+                        }
+
+                        $scope.model.value = remainder;
+
+                        var prevItemIndex = index - 1;
+
+                        //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
+                                $scope.model.value[prevItemIndex].hasFocus = true;
+                            });
+                        }
+
+                        backspaceHits = 0;
+                    }
+                }
+
+                break;
+            default:
+        }
+    }
+
     $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
+            var newItemIndex = $scope.model.value.length - 1;
+            $scope.model.value[newItemIndex].hasFocus = true;
         }
     };
 
-    $scope.remove = function(index) {
+    $scope.remove = function (index) {
         var remainder = [];
         for (var x = 0; x < $scope.model.value.length; x++) {
             if (x !== index) {
@@ -39,4 +100,4 @@
 
 }
 
-angular.module("umbraco").controller("Umbraco.PropertyEditors.MultipleTextBoxController", MultipleTextBoxController);
+angular.module("umbraco").controller("Umbraco.PropertyEditors.MultipleTextBoxController", MultipleTextBoxController);

src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html

@@ -1,20 +1,21 @@
 <div class="umb-editor umb-multiple-textbox" ng-controller="Umbraco.PropertyEditors.MultipleTextBoxController">
 
-    <div ui-sortable="sortableOptions" ng-model="model.value">
-        <div class="control-group" ng-repeat="item in model.value">
-            <i class="icon icon-navigation handle"></i>
-            <input type="text" name="item_{{$index}}" ng-model="item.value" class="umb-editor" />
-            <a prevent-default href="" localize="title" title="@content_removeTextBox"
-               ng-show="model.value.length > model.config.min"
-               ng-click="remove($index)">
-                <i class="icon icon-remove"></i>
-            </a>
-        </div>
+  <div ui-sortable="sortableOptions" ng-model="model.value">
+    <div class="control-group" ng-repeat="item in model.value">
+      <i class="icon icon-navigation handle"></i>
+      <input type="text" name="item_{{$index}}" ng-model="item.value" class="umb-editor"
+             ng-keyup="addRemoveOnKeyDown($event, $index)" focus-when="{{item.hasFocus}}"/>
+      <a prevent-default href="" localize="title" title="@content_removeTextBox"
+         ng-show="model.value.length > model.config.min"
+         ng-click="remove($index)">
+        <i class="icon icon-remove"></i>
+      </a>
     </div>
-    <a prevent-default href="" localize="title" title="@content_addTextBox"
-       ng-show="model.config.max <= 0 || model.value.length < model.config.max"
-       ng-click="add()">
-        <i class="icon icon-add"></i>
-    </a>
+  </div>
+  <a prevent-default href="" localize="title" title="@content_addTextBox"
+     ng-show="model.config.max <= 0 || model.value.length < model.config.max"
+     ng-click="add()">
+    <i class="icon icon-add"></i>
+  </a>
 
 </div>