Set focus to Umb-Tags when clicking property label (#6608)

src/Umbraco.Web.UI.Client/src/common/directives/components/tags/umbtagseditor.directive.js

@@ -18,6 +18,7 @@
                 config: "<",
                 validation: "<",
                 culture: "<?",
+                inputId: "@?",
                 onValueChanged: "&"
             }
         });
@@ -43,13 +44,13 @@
         vm.hidePrompt = hidePrompt;
         vm.onKeyUpOnTag = onKeyUpOnTag;
 
-        vm.htmlId = "t" + String.CreateGuid();
         vm.isLoading = true;
         vm.tagToAdd = "";
         vm.promptIsVisible = "-1";
         vm.viewModel = [];
 
         function onInit() {
+            vm.inputId = vm.inputId || "t" + String.CreateGuid();
 
             assetsService.loadJs("lib/typeahead.js/typeahead.bundle.min.js").then(function () {
 
@@ -106,7 +107,7 @@
                         minLength: 1
                     };
 
-                    typeahead = $element.find('.tags-' + vm.htmlId).typeahead(opts, sources)
+                    typeahead = $element.find('.tags-' + vm.inputId).typeahead(opts, sources)
                         .bind("typeahead:selected", function (obj, datum, name) {
                             angularHelper.safeApply($rootScope, function () {
                                 addTagInternal(datum["text"]);
@@ -153,7 +154,7 @@
                 tagsHound.clearRemoteCache();
                 tagsHound = null;
             }
-            $element.find('.tags-' + vm.htmlId).typeahead('destroy');
+            $element.find('.tags-' + vm.inputId).typeahead('destroy');
         }
 
         function configureViewModel(isInitLoad) {
@@ -228,7 +229,7 @@
         function addTagOnEnter(e) {
             var code = e.keyCode || e.which;
             if (code == 13) { //Enter keycode
-                if ($element.find('.tags-' + vm.htmlId).parent().find(".tt-menu .tt-cursor").length === 0) {
+                if ($element.find('.tags-' + vm.inputId).parent().find(".tt-menu .tt-cursor").length === 0) {
                     //this is required, otherwise the html form will attempt to submit.
                     e.preventDefault();
                     addTag();

src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html

@@ -21,8 +21,8 @@
             </span>
 
             <input type="text"
-                   id="{{vm.htmlId}}"
-                   class="typeahead tags-{{vm.htmlId}}"
+                   id="{{vm.inputId}}"
+                   class="typeahead tags-{{vm.inputId}}"
                    ng-model="vm.tagToAdd"
                    ng-keydown="vm.addTagOnEnter($event)"
                    ng-blur="vm.addTag()"

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

@@ -4,7 +4,8 @@
                      config="model.config"
                      validation="model.validation"
                      on-value-changed="valueChanged(value)"
-                     culture="model.culture">
+                     culture="model.culture"
+                     input-id="{{model.alias}}">
     </umb-tags-editor>
 
 </div>