Refactor Search Bar

Remove onFocus and onClick events

Signed-off-by: Randy <randymoralesg@gmail.com>

components/Navbar.js

@@ -1,10 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
 
-import { useState, useEffect } from 'react'
-
-import { CSSTransition } from 'react-transition-group'
-
 import useTranslation from '@/i18n/useTranslation'
 import Translator from '@/components/Translator'
 import ThemeSelector from '@/components/ThemeSelector'

pages/blog/index.js

@@ -31,7 +31,6 @@ export default function BlogIndex({ allLocalePostsData }) {
 
   const searchRef = useRef(null)
   const [query, setQuery] = useState('')
-  const [active, setActive] = useState(false)
   const [results, setResults] = useState([])
 
   const searchEndpoint = query => `/api/search?q=${query}`
@@ -50,27 +49,14 @@ export default function BlogIndex({ allLocalePostsData }) {
     }
   }, [])
 
-  const onFocus = useCallback(() => {
-    setActive(true)
-    window.addEventListener('click', onClick)
-  }, [])
-
-  const onClick = useCallback(event => {
-    if (searchRef.current && !searchRef.current.contains(event.target)) {
-      setActive(false)
-      window.removeEventListener('click', onClick)
-    }
-  }, [])
-
   return (
     <Layout pageTitle={t('blog')}>
-      <div ref={searchRef}>
-        <div className={styles.container}>
+      <div>
+        <div ref={searchRef} className={styles.container}>
           {/* Search bar */}
           <input
             className={styles.search}
             onChange={onChange}
-            onFocus={onFocus}
             placeholder={t('search-posts')}
             type='text'
             value={query}
@@ -88,7 +74,7 @@ export default function BlogIndex({ allLocalePostsData }) {
 
         {/* Show blog posts list */}
         <section className={styles.cardsContainer}>
-          {results.length == 0 && query != '' && active ? (
+          {results.length == 0 && query != '' ? (
             <> </>
           ) : (
             <>

styles/blog.module.css

@@ -1,4 +1,5 @@
 /* ******** Search Bar ******** */
+
 .container {
   display: flex;
   margin: 0 auto;
@@ -7,7 +8,6 @@
 
 .search {
   border: 1px solid #666;
-  box-sizing: border-box;
   cursor: 'pointer';
   font-size: 1.3rem;
   margin-bottom: 1rem;