Fix issue sidebar dropdown keyboard support (#33447) (#33450)

Backport #33447 by wxiaoguang

Just a quick fix, fix #33444

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/repo/issue/sidebar/assignee_list.tmpl

@@ -15,8 +15,9 @@
 				<i class="icon">{{svg "octicon-search" 16}}</i>
 				<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_assignees"}}">
 			</div>
-			<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
 			<div class="scrolling menu flex-items-block">
+				<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
+				<div class="divider"></div>
 				{{range $data.CandidateAssignees}}
 					<a class="item" href="#" data-value="{{.ID}}">
 						<span class="item-check-mark">{{svg "octicon-check"}}</span>

templates/repo/issue/sidebar/label_list.tmpl

@@ -16,8 +16,9 @@
 					<i class="icon">{{svg "octicon-search" 16}}</i>
 					<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}">
 				</div>
-				<a class="item clear-selection" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
 				<div class="scrolling menu">
+					<a class="item clear-selection" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
+					<div class="divider"></div>
 					{{$previousExclusiveScope := "_no_scope"}}
 					{{range $data.RepoLabels}}
 						{{$exclusiveScope := .ExclusiveScope}}

templates/repo/issue/sidebar/milestone_list.tmpl

@@ -18,9 +18,9 @@
 					<i class="icon">{{svg "octicon-search"}}</i>
 					<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_milestones"}}">
 				</div>
-				<div class="divider"></div>
-				<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
 				<div class="scrolling menu">
+					<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
+					<div class="divider"></div>
 					{{if $data.OpenMilestones}}
 						<div class="header">{{ctx.Locale.Tr "repo.issues.filter_milestone_open"}}</div>
 						{{range $data.OpenMilestones}}

templates/repo/issue/sidebar/project_list.tmpl

@@ -17,8 +17,9 @@
 				<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_projects"}}">
 			</div>
 			{{end}}
-			<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
 			<div class="scrolling menu">
+				<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
+				<div class="divider"></div>
 				{{if $data.OpenProjects}}
 					<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_projects"}}</div>
 					{{range $data.OpenProjects}}

web_src/js/features/repo-issue-sidebar.md

@@ -22,10 +22,13 @@ A sidebar combo (dropdown+list) is like this:
 When the selected items change, the `combo-value` input will be updated.
 If there is `data-update-url`, it also calls backend to attach/detach the changed items.
 
-Also, the changed items will be syncronized to the `ui list` items.
+Also, the changed items will be synchronized to the `ui list` items.
 
 The items with the same data-scope only allow one selected at a time.
 
 The dropdown selection could work in 2 modes:
 * single: only one item could be selected, it updates immediately when the item is selected.
 * multiple: multiple items could be selected, it defers the update until the dropdown is hidden.
+
+When using "scrolling menu", the items must be in the same level,
+otherwise keyboard (ArrowUp/ArrowDown/Enter) won't work.