use exactly the same markup for labels

Author: wxiaoguang

templates/repo/home.tmpl

@@ -43,8 +43,9 @@
 				>
 					<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
 					{{range .Topics}}
-						{{/* lalels generated by Fomantic still use `<i class="delete icon">`, to avoid mixing different style together and to remind future developers, use it instead of svg*/}}
-						<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}<i class="delete icon"></i></div>
+						{{/* lalels generated by Fomantic still use `<i class="delete icon">`, to avoid mixing different style together and to remind future developers, use it instead of svg
+								and keep the same as template (repo-topic-label), the style is also added by Fomantic Dropdown automatically when generating new labels */}}
+						<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important;">{{.Name}}<i class="delete icon"></i></div>
 					{{end}}
 					<div class="text"></div>
 				</div>

web_src/js/features/repo-home.js

@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import {stripTags} from '../utils.js';
 import {hideElem, showElem} from '../utils/dom.js';
+import {htmlEscape} from 'escape-goat';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -110,7 +111,7 @@ export function initRepoTopicBar() {
         const query = stripTags(this.urlData.query.trim());
         let found_query = false;
         const current_topics = [];
-        topicDropdown.find('div.label.visible.topic,a.label.visible').each((_, el) => {
+        topicDropdown.find('div.label.visible.topic').each((_, el) => {
           current_topics.push(el.getAttribute('data-value'));
         });
 
@@ -149,9 +150,10 @@ export function initRepoTopicBar() {
     },
     onLabelCreate(value) {
       value = value.toLowerCase().trim();
-      this.attr('data-value', value).contents().first().replaceWith(value);
-      addLabelDeleteIconAria(this.find('i.delete.icon'));
-      return this;
+      // keep the same as template (repo-topic-label)
+      const $el = $(`<div class="ui small label topic" data-value="${htmlEscape(value)}" >${htmlEscape(value)}<i class="delete icon"></i></div>`);
+      addLabelDeleteIconAria($el.find('i.delete.icon'));
+      return $el;
     },
     onAdd(addedValue, _addedText, $addedChoice) {
       addedValue = addedValue.toLowerCase().trim();