From 68cbc11810fd746a776f6b8fefd61cec89ac9b55 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Tue, 7 Dec 2021 04:30:05 +0100
Subject: [PATCH] Fix the search box

Fix #277 : autoselect search field
Fix #1107: no spell checking/auto-correct on search field
---
 assets/css/default.css                        | 34 ++++++++-----------
 src/invidious/views/components/search_box.ecr |  9 +++++
 src/invidious/views/search_homepage.ecr       |  6 +---
 src/invidious/views/template.ecr              |  6 +---
 4 files changed, 25 insertions(+), 30 deletions(-)
 create mode 100644 src/invidious/views/components/search_box.ecr

diff --git a/assets/css/default.css b/assets/css/default.css
index 95c1f55c..2cda980c 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -192,20 +192,24 @@ img.thumbnail {
   display: inline;
 }
 
-.searchbar .pure-form input[type="search"] {
-  margin-bottom: 1px;
+.searchbar .pure-form fieldset { padding: 0; }
 
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 1px solid #ccc;
-  border-radius: 0;
+.searchbar input[type="search"] {
+	width: 100%;
+	margin: 1px;
 
-  padding: initial 0;
+	border: 1px solid;
+	border-color: #0000 #0000 #CCC #0000;
+	border-radius: 0;
 
-  box-shadow: none;
+	box-shadow: none;
+	-webkit-appearance: none;
+}
 
-  -webkit-appearance: none;
+.searchbar input[type="search"]:focus {
+	margin: 0 0 0.5px 0;
+	border: 2px solid;
+	border-color: #0000 #0000 #FED #0000;
 }
 
 /* https://stackoverflow.com/a/55170420 */
@@ -217,16 +221,6 @@ input[type="search"]::-webkit-search-cancel-button {
   background-size: 14px;
 }
 
-.searchbar .pure-form fieldset {
-  padding: 0;
-}
-
-/* attract focus to the searchbar by adding a subtle transition */
-.searchbar .pure-form input[type="search"]:focus {
-  margin-bottom: 0px;
-  border-bottom: 2px solid #aaa;
-}
-
 .user-field {
   display: flex;
   flex-direction: row;
diff --git a/src/invidious/views/components/search_box.ecr b/src/invidious/views/components/search_box.ecr
new file mode 100644
index 00000000..4144d161
--- /dev/null
+++ b/src/invidious/views/components/search_box.ecr
@@ -0,0 +1,9 @@
+<form class="pure-form" action="/search" method="get">
+	<fieldset>
+		<input type="search" id="searchbox" autocomplete="off" autocorrect="off"
+		autocapitalize="none" spellcheck="false" autofocus name="q"
+		placeholder="<%= translate(locale, "search") %>"
+		title="<%= translate(locale, "search") %>"
+		value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
+	</fieldset>
+</form>
diff --git a/src/invidious/views/search_homepage.ecr b/src/invidious/views/search_homepage.ecr
index 7d2dab83..45561d1e 100644
--- a/src/invidious/views/search_homepage.ecr
+++ b/src/invidious/views/search_homepage.ecr
@@ -14,11 +14,7 @@
     </div>
     <div class="pure-u-1-4"></div>
     <div class="pure-u-1 pure-u-md-12-24 searchbar">
-        <form class="pure-form" action="/search" method="get">
-            <fieldset>
-                <input autofocus type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
-            </fieldset>
-        </form>
+        <%= rendered "components/search_box" %>
     </div>
     <div class="pure-u-1-4"></div>
 </div>
diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr
index 5b6e6ab8..efa434bf 100644
--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@@ -35,11 +35,7 @@
                         <a href="/" class="index-link pure-menu-heading">Invidious</a>
                     </div>
                     <div class="pure-u-1 pure-u-md-12-24 searchbar">
-                        <form class="pure-form" action="/search" method="get">
-                            <fieldset>
-                                <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
-                            </fieldset>
-                        </form>
+                        <%= rendered "components/search_box" %>
                     </div>
                 <% end %>