From 5f975eb666c05c6de71b76ced631fa6f7caec09e Mon Sep 17 00:00:00 2001
From: ShwetKhatri2001 <19dcs001@lnmiit.ac.in>
Date: Wed, 4 Aug 2021 14:01:39 +0530
Subject: [PATCH] made search from selection only,can't enter space

---
 src/components/SearchBox/SearchBox.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/SearchBox/SearchBox.js b/src/components/SearchBox/SearchBox.js
index c88c27f..74f8b7c 100644
--- a/src/components/SearchBox/SearchBox.js
+++ b/src/components/SearchBox/SearchBox.js
@@ -28,7 +28,7 @@ function SearchBox({ fetchProjects })
   const classes = useStyles();
   const [{ query }, dispatch] = useDataLayerValues();
   const [querySearch, setQuerySearch] = useState(query);
-  const [placeholder, setPlaceholder] = useState("e.g. reactjs (press space to focus)");
+  const [placeholder, setPlaceholder] = useState("e.g. reactjs (press space to focus then type and select)");
   const searchOptions = [ 
     "reactjs",
     "javascript",
@@ -55,14 +55,12 @@ function SearchBox({ fetchProjects })
 
   const handleSpaceKeyPress = useCallback(event =>
   {
-
     const { keyCode } = event;
     if (keyCode === 32)
     {
+      event.preventDefault();
       document.getElementById('searchboxinput').focus();
-      setQuerySearch("");
       setPlaceholder("e.g. reactjs");
-      
     }
   }, []);
 
@@ -93,17 +91,16 @@ function SearchBox({ fetchProjects })
         <form onSubmit={handleSubmit}>
           <Autocomplete
             id="searchboxinput"
+            noOptionsText={'try again and select option from dropdown'}
             options={searchOptions}
             value={querySearch}
             onChange={(event, value) => setQuerySearch(value)}
-            freeSolo={true}
+            freeSolo={false}
             classes={{ option: classes.option }}
             renderInput={(params) => (
               <div ref={params.InputProps.ref}>
                 <input
                   type="text"
-                  value={querySearch}
-                  onChange={(e) => setQuerySearch(e.target.value)}
                   placeholder={placeholder}
                   className={classes.input}
                   {...params.inputProps}