TD-3308: Keyword field only allows 50 chars which is problematic when adding multiple keywords at once

Author: Swapnamol

AdminUI/LearningHub.Nhs.AdminUI/Views/Catalogue/Edit.cshtml

@@ -165,7 +165,7 @@
 
             </div>
             <div class="col-12">
-                <p class="hint">You can enter a maximum of 50 characters</p>
+                <p class="hint">You can enter a maximum of 50 characters per keyword.</p>
                 <div class="keyword-list">
                     @{
                         var i = 0;
@@ -334,29 +334,31 @@
             });
 
             $('#add-keyword').on('click', function () {
-                var $keywordInput = $('#add-keyword-input');
-                var value = $keywordInput.val();
-                if (!value) {
-                    return;
-                }
-                value = value.trim();
-                if (keywords.indexOf(value) === -1) {
-                    keywords.push(value);
-                    $('#Keywords').val(keywords);
-                    var tag = $('<div class="keyword-tag"><p>' + value + '</p><i class="fa fa-times"></i><input class="keyword-value" type="hidden" value="' + value + '" /></div>');
-                    tag.find('.fa-times').on('click', removeKeyword);
-                    $('.keyword-list').append(tag);
-                    $keywordInput.val("");
-                    // reindex the keyword inputs
-                    $('.keyword-value').each(function (i, x) {
-                        $(x).attr('name', "Keywords[" + i + "]");
-                    });
-                }
-                if (keywords.length > 4) {
-                    $('#add-keyword').attr('disabled', 'disabled');
-                    $('#add-keyword-input').attr('disabled', 'disabled');
+              var $keywordInput = $('#add-keyword-input');
+              var value = $keywordInput.val();
+              if (!value) {
+                return;
+              }
+
+              // Split the input value by commas and trim each keyword
+              var values = value.split(',').map(function (item) {
+                return item.trim();
+              });
+
+              values.forEach(function (value) {
+                if (value && keywords.indexOf(value) === -1) {
+                  keywords.push(value);
+                  $('#Keywords').val(keywords);
+                  var tag = $('<div class="keyword-tag"><p>' + value + '</p><i class="fa fa-times"></i><input class="keyword-value" type="hidden" value="' + value + '" /></div>');
+                  tag.find('.fa-times').on('click', removeKeyword);
+                  $('.keyword-list').append(tag);
+
+                  // reindex the keyword inputs
+                  $('.keyword-value').each(function (i, x) {
+                    $(x).attr('name', "Keywords[" + i + "]");
+                  });
                 }
-            });
+              });
 
             // url
             var oldUrl = "";

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue

@@ -90,11 +90,11 @@
                     To help learners find this resource, type one or more relevant keywords separated by commas and click 'Add'.
                 </div>
                 <div class="col-12 mt-4 input-with-button">
-                    <input id="newKeyword" aria-labelledby="keyword-label" type="text" class="form-control" maxlength="50" v-model="newKeyword" v-bind:class="{ 'input-validation-error': keywordError }" @input="keywordError=false" @change="keywordChange" />
+                    <input id="newKeyword" aria-labelledby="keyword-label" type="text" class="form-control" maxlength="260" v-model="newKeyword" v-bind:class="{ 'input-validation-error': keywordError }" @input="keywordError=false" @change="keywordChange" />
                     <button type="button" class="nhsuk-button nhsuk-button--secondary ml-3 nhsuk-u-margin-bottom-0" @click="addKeyword">&nbsp;Add</button>
                 </div>
                 <div class="col-12 footer-text">
-                    You can enter a maximum of 50 characters
+                    You can enter a maximum of 50 characters per keyword
                 </div>
             </div>
         </div>
@@ -529,7 +529,7 @@
                         if (!this.keywords.find(_keyword => allTrimmedKeyword.includes(_keyword.keyword.toLowerCase()))) {
                             for (var i = 0; i < allTrimmedKeyword.length; i++) {
                                 let item = allTrimmedKeyword[i];
-                                if (item.length > 0) {
+                                if (item.length > 0 && item.length <= 50) {
                                     let newkeywordObj = new KeywordModel();
                                     newkeywordObj.keyword = item;
                                     newkeywordObj.resourceVersionId = this.resourceDetail.resourceVersionId;