search: contenteditable div field (Boost strips <input> but not a div) + placeholder + textContent submit

1703a9613387fc3ae4f9420f4a2896fa572b31eb · 2026-07-15 09:43:58 -0700 · Steve Abrams

Files touched

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

Diff

commit 1703a9613387fc3ae4f9420f4a2896fa572b31eb
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Jul 15 09:43:58 2026 -0700

    search: contenteditable div field (Boost strips <input> but not a div) + placeholder + textContent submit
---
 assets/custom.css      |  9 +++++++--
 sections/header.liquid | 15 ++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index f5f07a9..cc4e25b 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -1429,20 +1429,25 @@ input.add-to-cart:hover,
   background: #fff;
   color: #111;
   font-size: 14px;
+  line-height: 1.5;
+  white-space: nowrap;
   opacity: 0;
   overflow: hidden;
   pointer-events: none;
+  outline: none;
   transition: max-width 0.3s ease, opacity 0.2s ease, padding 0.2s ease, border-width 0.2s ease;
 }
 .header-quick-search.search-open .hdr-qs-input {
   max-width: 20ch;
-  padding: 7px 10px;
+  padding: 6px 10px;
   border-width: 1px;
   opacity: 1;
   pointer-events: auto;
 }
-.header-quick-search .hdr-qs-input::placeholder {
+.header-quick-search .hdr-qs-input:empty::before {
+  content: attr(data-placeholder);
   color: #888;
+  pointer-events: none;
 }
 @media (max-width: 539px) {
   .header-quick-search.search-open .hdr-qs-input {
diff --git a/sections/header.liquid b/sections/header.liquid
index 7ee4f1f..6796198 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -298,14 +298,14 @@
               id: 'search',
             %}
           </button>
-          <input
+          <div
             class="hdr-qs-input"
-            type="text"
             data-quick-search-input
-            placeholder="{{ 'general.search.header' | t }}"
+            contenteditable="true"
+            role="textbox"
             aria-label="{{ 'general.search.header' | t }}"
-            autocomplete="off"
-          >
+            data-placeholder="{{ 'general.search.header' | t }}"
+          ></div>
         </div>
 
         <a href="#" class="visual-search-clickable header-search-inline__visual" aria-controls="Visual Search">
@@ -357,14 +357,15 @@
       wrap.classList.remove('search-open');
       toggle.setAttribute('aria-expanded', 'false');
     }
+    function val() { return (input.textContent || '').trim(); }
     function submitSearch() {
-      var v = (input.value || '').trim();
+      var v = val();
       if (v) window.location.href = '/search?q=' + encodeURIComponent(v);
     }
     toggle.addEventListener('click', function (e) {
       e.preventDefault();
       // open with text -> submit; otherwise toggle the field open/closed
-      if (wrap.classList.contains('search-open') && input.value.trim()) { submitSearch(); return; }
+      if (wrap.classList.contains('search-open') && val()) { submitSearch(); return; }
       var open = wrap.classList.toggle('search-open');
       toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
       if (open) { setTimeout(function () { input.focus(); }, 60); }

← 93297cd search: Boost-proof plain input (custom attr, JS navigates t · back to Dw Theme Hamburger · search: theme search-form (Boost-survives + functional) forc ac3f255 →