Fix for safari

Author: motdotla

_includes/components/site-search.html

@@ -1,15 +1,17 @@
-<div class="site-search-overlay" data-site-search-overlay hidden>
+<div class="site-search-overlay" data-site-search-overlay hidden aria-hidden="true">
   <div class="site-search-dialog design-card" role="dialog" aria-modal="true" aria-labelledby="site-search-title">
     <form class="site-search" data-site-search action="/search/" method="get" role="search">
       <div class="site-search-bar">
         <label class="site-search-label" for="site-search-modal-input" id="site-search-title">Search</label>
         <input
-          type="search"
+          type="text"
           class="design-input site-search-input"
           name="q"
           id="site-search-modal-input"
           data-site-search-input
           placeholder="Search docs, pricing, encrypt…"
+          inputmode="search"
+          enterkeyhint="search"
           autocomplete="off"
           data-1p-ignore="true"
           data-lpignore="true"

assets/css/main.src.css

@@ -2567,6 +2567,7 @@ html.dark .design-link:focus {
 }
 
 .design-input {
+  -webkit-appearance: none;
   appearance: none;
   background: color-mix(in srgb, var(--design-ink) 4%, var(--design-bg, #fafafa));
   border: 1px solid var(--design-line, var(--design-mid));
@@ -2586,6 +2587,15 @@ html.dark .design-link:focus {
   width: 100%;
 }
 
+.design-input::-webkit-search-decoration,
+.design-input::-webkit-search-cancel-button,
+.design-input::-webkit-search-results-button,
+.design-input::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
 html.dark .design-input,
 html.storm .design-input {
   background-color: color-mix(in srgb, var(--design-ink) 6%, var(--design-bg, #0a0a0a));
@@ -2631,14 +2641,22 @@ html.storm .design-input:focus {
 .site-search-overlay {
   align-items: flex-start;
   background: color-mix(in srgb, var(--design-bg) 72%, transparent);
-  display: flex;
+  display: none;
   inset: 0;
   justify-content: center;
+  left: 0;
   padding: 12vh 1.25rem 2rem;
   position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
   z-index: 130;
 }
 
+.site-search-overlay.is-open {
+  display: flex;
+}
+
 .site-search-overlay[hidden] {
   display: none !important;
 }

assets/js/site-search.js

@@ -111,6 +111,10 @@
     return !!(node.isContentEditable)
   }
 
+  function isSlashKey(event) {
+    return event.key === '/' || event.code === 'Slash'
+  }
+
   function renderPageResults(root, items, query) {
     if (!query) {
       root.innerHTML = '<p class="design-paragraph">Type to search docs, pricing, and the rest of the site.</p>'
@@ -182,7 +186,7 @@
     var lastFocus = null
 
     function isOpen() {
-      return !overlay.hidden
+      return overlay.classList.contains('is-open')
     }
 
     function runPage(query) {
@@ -211,20 +215,31 @@
       nodes[activeIndex].scrollIntoView({ block: 'nearest' })
     }
 
+    function focusModalInput() {
+      try {
+        modalInput.focus()
+        if (typeof modalInput.select === 'function') modalInput.select()
+      } catch (_) {}
+    }
+
     function open() {
       lastFocus = document.activeElement
       overlay.hidden = false
+      overlay.classList.add('is-open')
+      overlay.setAttribute('aria-hidden', 'false')
       document.body.classList.add('overflow-hidden')
-      modalInput.focus()
-      modalInput.select()
+      focusModalInput()
+      window.requestAnimationFrame(focusModalInput)
       if (index && modalInput.value) runModal(modalInput.value)
     }
 
     function close() {
       if (!isOpen()) return
+      overlay.classList.remove('is-open')
       overlay.hidden = true
+      overlay.setAttribute('aria-hidden', 'true')
       document.body.classList.remove('overflow-hidden')
-      if (lastFocus && typeof lastFocus.focus === 'function') {
+      if (lastFocus && typeof lastFocus.focus === 'function' && lastFocus !== modalInput) {
         try { lastFocus.focus() } catch (_) {}
       }
     }
@@ -240,6 +255,7 @@
         if (pageInput) {
           if (initial) pageInput.value = initial
           runPage(pageInput.value)
+          pageInput.focus()
         } else if (initial) {
           modalInput.value = initial
         }
@@ -296,14 +312,14 @@
       if (event.target === overlay) close()
     })
 
-    window.addEventListener('keydown', function (event) {
+    document.addEventListener('keydown', function (event) {
       if (event.key === 'Escape' && isOpen()) {
         event.preventDefault()
         close()
         return
       }
 
-      if (event.key === '/' && !event.metaKey && !event.ctrlKey && !event.altKey && !isOpen()) {
+      if (isSlashKey(event) && !event.metaKey && !event.ctrlKey && !event.altKey && !isOpen()) {
         if (isTypingTarget(event.target)) return
         event.preventDefault()
         open()
@@ -319,6 +335,11 @@
         event.preventDefault()
         setActive(activeIndex - 1)
       }
+    }, true)
+
+    modalInput.addEventListener('keypress', function (event) {
+      if (!isSlashKey(event) || modalInput.value) return
+      event.preventDefault()
     })
   })
 })()

search/index.md

@@ -18,12 +18,14 @@ layout: radar
     <form class="site-search-page" data-site-search-page action="/search/" method="get" role="search">
       <div class="site-search-page-field">
         <input
-          type="search"
+          type="text"
           class="design-input site-search-input"
           name="q"
           id="site-search-page-input"
           data-site-search-input
           placeholder="Search for Claude, pricing, encrypt…"
+          inputmode="search"
+          enterkeyhint="search"
           autocomplete="off"
           autofocus
           data-1p-ignore="true"