search: use controlled minimal form (guaranteed 20ch expand + working /search submit)

c50b970f5a1e135bcfdc900749a6687c728dbce8 · 2026-07-15 09:30:56 -0700 · Steve Abrams

Files touched

M assets/custom.css
M sections/header.liquid

Diff

commit c50b970f5a1e135bcfdc900749a6687c728dbce8
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Jul 15 09:30:56 2026 -0700

    search: use controlled minimal form (guaranteed 20ch expand + working /search submit)
---
 assets/custom.css      | 28 ++++++++++++++++------------
 sections/header.liquid | 19 +++++++++++++------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index 3769abb..89d4e19 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -1418,36 +1418,40 @@ input.add-to-cart:hover,
   cursor: pointer;
   order: 2;
 }
-.header-quick-search .search-form {
+.header-quick-search .hdr-qs-form {
   order: 1;
   margin: 0;
   max-width: 0;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
-  transition: max-width 0.28s ease, opacity 0.18s ease;
+  transition: max-width 0.3s ease, opacity 0.2s ease;
 }
-.header-quick-search.search-open .search-form {
+.header-quick-search.search-open .hdr-qs-form {
   max-width: 24ch;
   opacity: 1;
   overflow: visible;
   pointer-events: auto;
 }
-.header-quick-search .search-form__input {
+.header-quick-search .hdr-qs-input {
   width: 20ch;
-  max-width: 20ch;
+  box-sizing: border-box;
+  padding: 7px 10px;
+  border: 1px solid rgba(0, 0, 0, 0.28);
+  border-radius: 4px;
+  font-size: 14px;
+  background: #fff;
+  color: #111;
 }
-/* hide the form's own submit magnifier; the eyeglass toggle submits when text is present */
-.header-quick-search .search-form__submit-button {
-  display: none;
+.header-quick-search .hdr-qs-input::placeholder {
+  color: #888;
 }
 @media (max-width: 539px) {
-  .header-quick-search.search-open .search-form {
-    max-width: 62vw;
+  .header-quick-search.search-open .hdr-qs-form {
+    max-width: 64vw;
   }
-  .header-quick-search .search-form__input {
+  .header-quick-search .hdr-qs-input {
     width: 100%;
-    max-width: none;
   }
 }
 
diff --git a/sections/header.liquid b/sections/header.liquid
index fcf5b16..760d88a 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -298,10 +298,17 @@
               id: 'search',
             %}
           </button>
-          {%
-            render 'search-form',
-            context: 'header',
-          %}
+          <form class="hdr-qs-form" action="{{ routes.search_url }}" method="get" role="search" data-quick-search-form>
+            <input
+              class="hdr-qs-input"
+              type="search"
+              name="q"
+              value="{{ search.terms | escape }}"
+              placeholder="{{ 'general.search.header' | t }}"
+              aria-label="{{ 'general.search.header' | t }}"
+              autocomplete="off"
+            >
+          </form>
         </div>
 
         <a href="#" class="visual-search-clickable header-search-inline__visual" aria-controls="Visual Search">
@@ -347,8 +354,8 @@
     var wrap = document.querySelector('[data-section-header] [data-quick-search]');
     if (!wrap) return;
     var toggle = wrap.querySelector('[data-quick-search-toggle]');
-    var input = wrap.querySelector('.search-form__input');
-    var form = wrap.querySelector('form');
+    var input = wrap.querySelector('.hdr-qs-input');
+    var form = wrap.querySelector('.hdr-qs-form');
     if (!toggle) return;
     function close() {
       wrap.classList.remove('search-open');

← 46de4d1 search: rebuild as working eyeglass-triggered field (eyeglas · back to Dw Theme Hamburger · search: Boost-proof plain input (custom attr, JS navigates t 93297cd →