feat: 🎸 Added onInputChange prop to autocomplete component

✅ Closes: #65
SelectQuoteLabs · Jan 12, 2021 · 2b08d17 · 2b08d17
1 parent 5161f99
commit 2b08d17
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/components/SQForm/SQFormAsyncAutocomplete.js b/src/components/SQForm/SQFormAsyncAutocomplete.js
@@ -91,6 +91,7 @@ function SQFormAsyncAutocomplete({
   name,
   onBlur,
   onChange,
+  onInputChange,
   handleAsyncInputChange,
   loading,
   open,
@@ -142,8 +143,9 @@ function SQFormAsyncAutocomplete({
     (_event, value) => {
       setInputValue(value);
       handleAsyncInputChange(value);
+      onInputChange && onInputChange();
     },
-    [handleAsyncInputChange]
+    [handleAsyncInputChange, onInputChange]
   );
 
   return (
@@ -231,6 +233,8 @@ SQFormAsyncAutocomplete.propTypes = {
   onBlur: PropTypes.func,
   /** Custom onChange event callback */
   onChange: PropTypes.func,
+  /** Custom onInputChange event callback (key pressed)*/
+  onInputChange: PropTypes.func,
   /** Size of the input given full-width is 12. */
   size: PropTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
 };

diff --git a/src/components/SQForm/SQFormAutocomplete.js b/src/components/SQForm/SQFormAutocomplete.js
@@ -90,6 +90,7 @@ function SQFormAutocomplete({
   name,
   onBlur,
   onChange,
+  onInputChange,
   size = 'auto'
 }) {
   const classes = useStyles();
@@ -140,9 +141,13 @@ function SQFormAutocomplete({
     [name, onChange, setFieldValue]
   );
 
-  const handleInputChange = React.useCallback((_event, value) => {
-    setInputValue(value);
-  }, []);
+  const handleInputChange = React.useCallback(
+    (_event, value) => {
+      setInputValue(value);
+      onInputChange && onInputChange();
+    },
+    [onInputChange]
+  );
 
   return (
     <Grid item sm={size}>
@@ -214,6 +219,8 @@ SQFormAutocomplete.propTypes = {
   onBlur: PropTypes.func,
   /** Custom onChange event callback */
   onChange: PropTypes.func,
+  /** Custom onInputChange event callback (key pressed) */
+  onInputChange: PropTypes.func,
   /** Size of the input given full-width is 12. */
   size: PropTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
 };

diff --git a/stories/SQForm.stories.js b/stories/SQForm.stories.js
@@ -131,6 +131,7 @@ export const basicForm = () => {
           name="tenThousandOptions"
           label="Ten Thousand Options"
           size={6}
+          onInputChange={action('Update local state')}
         >
           {MOCK_AUTOCOMPLETE_OPTIONS}
         </SQFormAutocomplete>