From 1ec6a552c6e1d1795ca84e815ff8b1f262b6ca6f Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 25 Dec 2023 11:34:49 +0300
Subject: [PATCH] some-search-fixws

---
 src/components/Views/FourOuFour.tsx | 16 ++++++++++++++--
 src/components/Views/Search.tsx     |  1 +
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Views/FourOuFour.tsx b/src/components/Views/FourOuFour.tsx
index 44015b8b..218254e2 100644
--- a/src/components/Views/FourOuFour.tsx
+++ b/src/components/Views/FourOuFour.tsx
@@ -4,8 +4,14 @@ import { useLocalize } from '../../context/localize'
 import { Icon } from '../_shared/Icon'
 
 import styles from '../../styles/FourOuFour.module.scss'
+import { openPage } from '@nanostores/router'
+import { router } from '../../stores/router'
 
 export const FourOuFourView = (_props) => {
+  let queryInput: HTMLInputElement
+  const search = (_ev) => {
+    openPage(router, 'search', { q: queryInput.value })
+  }
   const { t } = useLocalize()
   return (
     <div class={styles.errorPageWrapper}>
@@ -29,9 +35,15 @@ export const FourOuFourView = (_props) => {
               <div class={styles.errorExplain}>
                 <p>{t(`You've reached a non-existed page`)}</p>
                 <p>{t('Try to find another way')}:</p>
-                <form class={clsx(styles.prettyForm, 'pretty-form')} action="/search" method="get">
+                <form class={clsx(styles.prettyForm, 'pretty-form')} method="get" onSubmit={search}>
                   <div class={clsx(styles.prettyFormItem, 'pretty-form__item')}>
-                    <input type="text" name="q" placeholder={t('Search')} id="search-field" />
+                    <input
+                      type="text"
+                      name="q"
+                      placeholder={t('Search')}
+                      id="search-field"
+                      ref={queryInput}
+                    />
                     <label for="search-field">{t('Search')}</label>
                     <button type="submit" class={styles.searchSubmit}>
                       <Icon name="search" />
diff --git a/src/components/Views/Search.tsx b/src/components/Views/Search.tsx
index db417713..0884b5d6 100644
--- a/src/components/Views/Search.tsx
+++ b/src/components/Views/Search.tsx
@@ -54,6 +54,7 @@ export const SearchView = (props: Props) => {
   onMount(async () => {
     const q = window.location.pathname.replace('/search/', '') || props.query
     setQuery(q)
+    searchEl.value = q
   })
 
   // TODO: use score from the search results to sort by relevance