From af094fbb6c066ba2e02b812dc3e5875d46e0db42 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 22 Jun 2023 12:27:35 +0200
Subject: [PATCH] Introduce shared template for search inputs (#25338)

- Set
[type=search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search)
- Disable spellcheck
- Set maxLength 255 that I found in `templates/repo/issue/search.tmpl`
- Remove unnecessary `max-width`, it does nothing

---------

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
---
 templates/admin/base/search.tmpl            | 4 ++--
 templates/admin/emails/list.tmpl            | 4 ++--
 templates/admin/packages/list.tmpl          | 2 +-
 templates/admin/repo/search.tmpl            | 4 ++--
 templates/admin/user/list.tmpl              | 4 ++--
 templates/code/searchform.tmpl              | 2 +-
 templates/explore/repo_search.tmpl          | 4 ++--
 templates/explore/search.tmpl               | 4 ++--
 templates/package/shared/list.tmpl          | 2 +-
 templates/package/shared/versionlist.tmpl   | 2 +-
 templates/repo/issue/milestones.tmpl        | 2 +-
 templates/repo/issue/search.tmpl            | 2 +-
 templates/shared/actions/runner_list.tmpl   | 4 ++--
 templates/shared/searchinput.tmpl           | 1 +
 templates/user/dashboard/issues.tmpl        | 2 +-
 templates/user/dashboard/milestones.tmpl    | 2 +-
 web_src/js/components/DashboardRepoList.vue | 2 +-
 17 files changed, 24 insertions(+), 23 deletions(-)
 create mode 100644 templates/shared/searchinput.tmpl

diff --git a/templates/admin/base/search.tmpl b/templates/admin/base/search.tmpl
index ae1a4d2ac5..bc684e7657 100644
--- a/templates/admin/base/search.tmpl
+++ b/templates/admin/base/search.tmpl
@@ -15,9 +15,9 @@
 		</div>
 	</div>
 </div>
-<form class="ui form ignore-dirty"  style="max-width: 90%;">
+<form class="ui form ignore-dirty">
 	<div class="ui fluid action input">
-		<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+		{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
 		<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
 	</div>
 </form>
diff --git a/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl
index 1da40cbf29..db15887d98 100644
--- a/templates/admin/emails/list.tmpl
+++ b/templates/admin/emails/list.tmpl
@@ -19,9 +19,9 @@
 					</div>
 				</div>
 			</div>
-			<form class="ui form ignore-dirty"  style="max-width: 90%">
+			<form class="ui form ignore-dirty">
 				<div class="ui fluid action input">
-					<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+					{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
 					<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
 				</div>
 			</form>
diff --git a/templates/admin/packages/list.tmpl b/templates/admin/packages/list.tmpl
index f320878b80..a0b6fd9bb0 100644
--- a/templates/admin/packages/list.tmpl
+++ b/templates/admin/packages/list.tmpl
@@ -8,7 +8,7 @@
 		<div class="ui attached segment">
 			<form class="ui form ignore-dirty">
 				<div class="ui fluid action input">
-					<input name="q" value="{{.Query}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+					{{template "shared/searchinput" dict "locale" .locale "Value" .Query "AutoFocus" true}}
 					<select class="ui dropdown" name="type">
 						<option value="">{{.locale.Tr "packages.filter.type"}}</option>
 						<option value="all">{{.locale.Tr "packages.filter.type.all"}}</option>
diff --git a/templates/admin/repo/search.tmpl b/templates/admin/repo/search.tmpl
index 15aa31b32b..cb9aad1a66 100644
--- a/templates/admin/repo/search.tmpl
+++ b/templates/admin/repo/search.tmpl
@@ -21,9 +21,9 @@
 		</div>
 	</div>
 </div>
-<form class="ui form ignore-dirty"  style="max-width: 90%">
+<form class="ui form ignore-dirty">
 	<div class="ui fluid action input">
-		<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+		{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
 		<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
 	</div>
 </form>
diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl
index 2f76f2d3ba..3093b0f47a 100644
--- a/templates/admin/user/list.tmpl
+++ b/templates/admin/user/list.tmpl
@@ -51,8 +51,8 @@
 				</div>
 
 				<!-- Search Text -->
-				<div class="ui fluid action input" style="max-width: 70%;">
-					<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+				<div class="ui fluid action input">
+					{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
 					<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
 				</div>
 			</form>
diff --git a/templates/code/searchform.tmpl b/templates/code/searchform.tmpl
index dfe7bc5b10..822102fc70 100644
--- a/templates/code/searchform.tmpl
+++ b/templates/code/searchform.tmpl
@@ -1,6 +1,6 @@
 <form class="ui form ignore-dirty" style="max-width: 100%">
 	<div class="ui fluid action input">
-		<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{.locale.Tr "explore.search"}}…" autofocus>
+		{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true "Disabled" .CodeIndexerUnavailable}}
 		<div class="ui dropdown selection {{if .CodeIndexerUnavailable}} disabled{{end}}" data-tooltip-content="{{.locale.Tr "explore.search.type.tooltip"}}">
 			<input name="t" type="hidden" value="{{.queryType}}"{{if .CodeIndexerUnavailable}} disabled{{end}}>{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			<div class="text">{{.locale.Tr (printf "explore.search.%s" (or .queryType "fuzzy"))}}</div>
diff --git a/templates/explore/repo_search.tmpl b/templates/explore/repo_search.tmpl
index 85c1be8e6e..4c72affea0 100644
--- a/templates/explore/repo_search.tmpl
+++ b/templates/explore/repo_search.tmpl
@@ -21,11 +21,11 @@
 		</div>
 	</div>
 </div>
-<form class="ui form ignore-dirty" style="max-width: 90%">
+<form class="ui form ignore-dirty">
 	<input type="hidden" name="sort" value="{{$.SortType}}">
 	<input type="hidden" name="language" value="{{$.Language}}">
 	<div class="ui fluid action input">
-		<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}…" autofocus>
+		{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
 		{{if .PageIsExploreRepositories}}
 			<input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}">
 		{{end}}
diff --git a/templates/explore/search.tmpl b/templates/explore/search.tmpl
index 72dee41f0f..70780648b2 100644
--- a/templates/explore/search.tmpl
+++ b/templates/explore/search.tmpl
@@ -15,9 +15,9 @@
 		</div>
 	</div>
 </div>
-<form class="ui form ignore-dirty" style="max-width: 90%">
+<form class="ui form ignore-dirty">
 	<div class="ui fluid action input">
-		<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}…" autofocus>
+		{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
 		<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
 	</div>
 </form>
diff --git a/templates/package/shared/list.tmpl b/templates/package/shared/list.tmpl
index 5ac5baf0f1..3d14eda3ef 100644
--- a/templates/package/shared/list.tmpl
+++ b/templates/package/shared/list.tmpl
@@ -2,7 +2,7 @@
 	{{template "base/alert" .}}
 	<form class="ui form ignore-dirty">
 		<div class="ui fluid action input">
-			<input name="q" value="{{.Query}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+			{{template "shared/searchinput" dict "locale" .locale "Value" .Query "AutoFocus" true}}
 			<select class="ui dropdown" name="type">
 				<option value="">{{.locale.Tr "packages.filter.type"}}</option>
 				<option value="all">{{.locale.Tr "packages.filter.type.all"}}</option>
diff --git a/templates/package/shared/versionlist.tmpl b/templates/package/shared/versionlist.tmpl
index ba488586a8..23cd0bfcc0 100644
--- a/templates/package/shared/versionlist.tmpl
+++ b/templates/package/shared/versionlist.tmpl
@@ -2,7 +2,7 @@
 	<p><a href="{{.PackageDescriptor.PackageWebLink}}">{{.PackageDescriptor.Package.Name}}</a> / <strong>{{.locale.Tr "packages.versions"}}</strong></p>
 	<form class="ui form ignore-dirty">
 		<div class="ui fluid action input">
-			<input name="q" value="{{.Query}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+			{{template "shared/searchinput" dict "locale" .locale "Value" .Query "AutoFocus" true}}
 			<select class="ui dropdown" name="sort">
 				<option value="version_asc"{{if eq .Sort "version_asc"}} selected="selected"{{end}}>{{.locale.Tr "filter.string.asc"}}</option>
 				<option value="version_desc"{{if eq .Sort "version_desc"}} selected="selected"{{end}}>{{.locale.Tr "filter.string.desc"}}</option>
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index da239b694a..6655c70029 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -28,7 +28,7 @@
 			<form class="list-header-search ui form ignore-dirty">
 				<div class="ui small search fluid action input">
 					<input type="hidden" name="state" value="{{$.State}}">
-					<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
+					{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword}}
 					<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">
 						{{svg "octicon-search"}}
 					</button>
diff --git a/templates/repo/issue/search.tmpl b/templates/repo/issue/search.tmpl
index 13224680bd..ec7789b952 100644
--- a/templates/repo/issue/search.tmpl
+++ b/templates/repo/issue/search.tmpl
@@ -7,7 +7,7 @@
 		<input type="hidden" name="project" value="{{$.ProjectID}}">
 		<input type="hidden" name="assignee" value="{{$.AssigneeID}}">
 		<input type="hidden" name="poster" value="{{$.PosterID}}">
-		<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." maxlength="255">
+		{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword}}
 		{{if .PageIsIssueList}}
 			<button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}" data-repo-link="{{.RepoLink}}">{{svg "octicon-hash"}}</button>
 		{{end}}
diff --git a/templates/shared/actions/runner_list.tmpl b/templates/shared/actions/runner_list.tmpl
index 5da55f44bb..36210af6d8 100644
--- a/templates/shared/actions/runner_list.tmpl
+++ b/templates/shared/actions/runner_list.tmpl
@@ -35,8 +35,8 @@
 	<div class="ui attached segment">
 		<form class="ui form ignore-dirty" id="user-list-search-form" action="{{$.Link}}">
 			<!-- Search Text -->
-			<div class="ui fluid action input" style="max-width: 70%;">
-				<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+			<div class="ui fluid action input">
+				{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
 				<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
 			</div>
 		</form>
diff --git a/templates/shared/searchinput.tmpl b/templates/shared/searchinput.tmpl
new file mode 100644
index 0000000000..aae5437b12
--- /dev/null
+++ b/templates/shared/searchinput.tmpl
@@ -0,0 +1 @@
+<input type="search" spellcheck="false" name="q" maxlength="255" placeholder="{{.locale.Tr "explore.search"}}…"{{if .Value}} value="{{.Value}}"{{end}}{{if .AutoFocus}} autofocus{{end}}{{if .Disabled}} disabled{{end}}>
diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
index e7762c5a93..528c9f4f9c 100644
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@@ -77,7 +77,7 @@
 							<input type="hidden" name="repos" value="[{{range $.RepoIDs}}{{.}}%2C{{end}}]">
 							<input type="hidden" name="sort" value="{{$.SortType}}">
 							<input type="hidden" name="state" value="{{$.State}}">
-							<input name="q" value="{{$.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
+							{{template "shared/searchinput" dict "locale" .locale "Value" $.Keyword}}
 							<button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}">{{svg "octicon-hash"}}</button>
 							<button class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
 						</div>
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
index c68d0783b8..43d145ac5e 100644
--- a/templates/user/dashboard/milestones.tmpl
+++ b/templates/user/dashboard/milestones.tmpl
@@ -51,7 +51,7 @@
 							<input type="hidden" name="repos" value="[{{range $.RepoIDs}}{{.}},{{end}}]">
 							<input type="hidden" name="sort" value="{{$.SortType}}">
 							<input type="hidden" name="state" value="{{$.State}}">
-							<input name="q" value="{{$.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
+							{{template "shared/searchinput" dict "locale" .locale "Value" $.Keyword}}
 							<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
 						</div>
 					</form>
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index b47d872927..6d27cb7508 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -16,7 +16,7 @@
       </h4>
       <div class="ui attached segment repos-search">
         <div class="ui fluid right action left icon input" :class="{loading: isLoading}">
-          <input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
+          <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
           <i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
           <div class="ui dropdown icon button" :title="textFilter">
             <svg-icon name="octicon-filter" :size="16"/>