fix(autocomplete): minor fixes

fix breaking tests, add message when no matching results and fix list update after blur

Author: rishichawda

lib/autocomplete/index.js

@@ -17,6 +17,7 @@ class AutoComplete extends Component {
     */
     this.state = {
       data: props.data,
+      // eslint-disable-next-line react/no-unused-state
       prevProps: props.data,
       input: { [`${props.labelKey}`]: '', [`${props.valueKey}`]: null },
       showSuggestions: false,
@@ -92,7 +93,7 @@ class AutoComplete extends Component {
   // Hide the options dropdown menu and clear keyboard focused element.
   hideSuggestions = () => {
     const { data, input, blockOnBlur } = this.state;
-    const { labelKey, valueKey } = this.props;
+    const { labelKey, valueKey, data: propsData } = this.props;
 
     // Only if a valid option is typed then allow to remain without clicking
     const matchedItem = data
@@ -108,6 +109,7 @@ class AutoComplete extends Component {
           [`${labelKey}`]: '',
           [`${valueKey}`]: null,
         },
+        data: propsData,
       });
     }
 
@@ -222,7 +224,7 @@ class AutoComplete extends Component {
   renderOptions = () => {
     const { theme, labelKey } = this.props;
     const { focus, data } = this.state;
-    return data
+    return data.length ? data
       .map((item, index) => {
         // Assign each item a class to customize
         const classes = cx(theme['autocomplete-list-item'], {
@@ -245,7 +247,7 @@ class AutoComplete extends Component {
             {item[`${labelKey}`]}
           </div>
         );
-      });
+      }) : 'No results found!';
   };
 
   render() {
@@ -258,7 +260,9 @@ class AutoComplete extends Component {
       valueKey,
       ...rest
     } = this.props;
-    const { showSuggestions, focused, input } = this.state;
+    const {
+      showSuggestions, focused, input,
+    } = this.state;
     const classes = cx(className, theme.autocomplete);
     return (
       <div className={classes}>

lib/autocomplete/theme.module.scss

@@ -30,6 +30,7 @@
         box-sizing: border-box;
         height: fit-content;
         height: -moz-fit-content;
+        text-align: center;
         max-height: 300px;
         width: 100%;
         overflow-y: auto;