Fix website search so you need to submit to trigger a search (#935)

- Update the website search so you need to submit to trigger a search.
- Refactor select() calls to effects
- In mobile, a full-screen form appears when you search

docs/src/actions.js

@@ -28,10 +28,11 @@ export const SetSearchData = (state, searchData) => ({
   searchData
 })
 
-export const Navigate = (state, to) => [
+export const Navigate = (state, to, ...extraEffects) => [
   CloseMenu(ParseUrl(state, to)),
   [
     UpdateHistory({ to }),
-    HighLight()
+    HighLight(),
+    ...extraEffects
   ]
 ]

docs/src/components/Header/index.jsx

@@ -2,15 +2,25 @@ import './style.css'
 import Link from '../Link'
 import SmartLink from '../SmartLink'
 import { Navigate, OpenMenu, CloseMenu } from '../../actions'
+import { Select } from '../../effects'
 
 const OnSearch = (state, ev) => {
   ev.preventDefault()
-  return [Navigate, `/search?q=${encodeURI(ev.target.value)}`]
+  return Navigate(
+    state,
+    `/search?q=${encodeURI(ev.target.search.value)}`,
+    Select({selector: '#search'})
+  )
+}
+
+const OnFocus = (state, ev) => {
+  return [
+    state,
+    Select({selector: '#search'})
+  ]
 }
 
 export default ({ menuOpened, location }) => {
-  console.log(location)
-
   return (
     <header class={{
       'site-header': true,
@@ -38,16 +48,21 @@ export default ({ menuOpened, location }) => {
         <SmartLink to="/sponsor">sponsor</SmartLink>
         <SmartLink to="/guides">guides</SmartLink>
         <SmartLink to="/api">api</SmartLink>
-        <input
-          type="text"
-          id="search"
-          name="search"
-          class="search-field"
-          placeholder="search"
-          value={location.queryParams.q}
-          oninput={OnSearch}
-          required
-        />
+        <form
+          class="search-form"
+          onsubmit={OnSearch}
+        >
+          <input
+            type="text"
+            id="search"
+            name="search"
+            class="search-field"
+            placeholder="search"
+            value={location.queryParams.q}
+            onfocus={OnFocus}
+            required
+          />
+        </form>
       </nav>
     </header>
   )

docs/src/components/Header/style.css

@@ -83,7 +83,6 @@
   color: var(--dark-blue);
 }
 
-
 .search-field {
   max-width: 100%;
   width: 100%;
@@ -99,6 +98,23 @@
 }
 
 
+
+@media (max-width: 991px) {
+  .search-form:focus-within {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1.25rem;
+    background-color: rgba(255, 255, 255, 0.9);
+    display: flex;
+    align-items: center;
+    z-index: 20;
+  }
+}
+
+
 @media (min-width: 640px) {
   .site-header {
     padding: 1rem 1.25rem 1rem 1.25rem;
@@ -125,7 +141,6 @@
   .menu {
     position: relative;
     display: block;
-    width: var(--menu-width);
     background: none;
     padding: 0;
     min-height: auto;

docs/src/effects.js

@@ -26,3 +26,12 @@ const focusFx = (_dispatch, { selector }) => {
 }
 
 export const Focus = ({ selector }) => [focusFx, { selector }]
+
+const selectFx = (_dispatch, { selector }) => {
+  const el = document.querySelector(selector)
+  if (el) {
+    el.select()
+  }
+}
+
+export const Select = ({ selector }) => [selectFx, { selector }]

docs/src/global.css

@@ -1,7 +1,7 @@
 @import './styleguide/hyperapp.css';
 
 body {
-  --menu-width: 18rem;
+  --menu-width: 19rem;
 }
 
 .app {