Merge pull request #282 from ShwetKhatri2001/main

Find from selection without space
rockingrohit9639 · Aug 5, 2021 · 8ba623f · 8ba623f
2 parents 7b0604c + 5f975eb
commit 8ba623f
Showing 1 changed file with 4 additions and 7 deletions.
diff --git 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}