fix onKeyDown issue and provide autoFocus feature

Author: dev-javascript

README.md

@@ -20,6 +20,10 @@ Whether you want to showcase a constant list of options or dynamically adapt to
 
 - Lightweight
 
+- autoFocus
+
+- Open Suggestion List on Enter Key
+
 ## Installation
 
 > $ npm install react-custom-search-list @popperjs/core --save
@@ -119,6 +123,9 @@ function App() {
   - type : `"outline"|"underline"|"panel"`
   - description : searchbox theme
   - default : `"outline"`
+- **autoFocus?**
+  - type : `Boolean`
+  - default : `Fasle`
 
 ## Test
 

src/index.js

@@ -23,6 +23,7 @@ import ClearIcon from './icons/clear.js';
  * @param {Function} [props.onClear=()=>{}] - triggerd when the user clicks on the default Clear icon
  * @param {"underline"|"outline"|"panel"} [props.theme="outline"] - searchbox theme
  * @param {Boolean} [props.corner=true] - if set true then border-radius would be "5px"
+ * @param {Boolean} [props.autoFocus=false] - autoFocus attribute for the input element
  */
 function ReactCustomSearchList(props) {
   const {
@@ -44,6 +45,7 @@ function ReactCustomSearchList(props) {
     onClear = () => {},
     theme = 'outline',
     corner = true,
+    autoFocus = false,
   } = props;
   const [open, setOpen] = useState(false);
   const rootRef = useRef();
@@ -52,12 +54,10 @@ function ReactCustomSearchList(props) {
   }, []);
   const onKeyDownHandler = useCallback(
     (e) => {
-      (e) => {
-        if (e.key.toLowerCase() === 'enter' && open === false) {
-          setOpen(true);
-        }
-        onKeyDown(e);
-      };
+      if (e.key === 'Enter' || e.keyCode === 13) {
+        setOpen(true);
+      }
+      onKeyDown(e);
     },
     [onKeyDown],
   );
@@ -98,6 +98,7 @@ function ReactCustomSearchList(props) {
           onBlur={onBlur}
           placeholder={placeholder}
           style={inputStyle}
+          autoFocus={autoFocus}
         />
         {ClearIconComponent ? <ClearIconComponent value={value} onClear={onClear} /> : null}
 

style/react-custom-search-list.css

@@ -61,25 +61,25 @@
 .panel [data-popper-placement|=bottom] {
   margin-top: -1px !important;
   border-top: none;
-  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 4px 3px -2px rgba(0, 0, 0, 0.14), 0px 6px 5px -2px rgba(0, 0, 0, 0.12);
 }
 .panel [data-popper-placement|=bottom] + .rc-search-suggestions-container {
   border: 1px solid rgb(232, 232, 232);
   border-bottom: none;
-  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 4px 2px -1px rgba(0, 0, 0, 0.14), 0px 6px 4px -1px rgba(0, 0, 0, 0.12);
 }
 .panel [data-popper-placement|=bottom] + .rc-search-suggestions-container .rc-search-suggestions-divider-bottom {
   display: block;
 }
 .panel [data-popper-placement|=top] {
   margin-bottom: -1px !important;
   border-bottom: none;
-  box-shadow: 0px -2px 5px 0px rgb(207, 207, 207);
+  box-shadow: 0px -2px 5px -2px rgba(73, 73, 73, 0.19);
 }
 .panel [data-popper-placement|=top] + .rc-search-suggestions-container {
   border: 1px solid rgb(232, 232, 232);
   border-bottom: top;
-  box-shadow: 0px 0px 5px 0px rgb(207, 207, 207);
+  box-shadow: 0px 0px 3px -2px rgba(73, 73, 73, 0.19);
 }
 .panel [data-popper-placement|=top] + .rc-search-suggestions-container .rc-search-suggestions-divider-top {
   display: block;