Introduce shared template for search inputs (#25338)

silverwind · delvh · GiteaBot · web-flow · commit af094fbb6c06 · 2023-06-22T10:27:35.000Z
- 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>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"/>
