feat(react): added input change callback to multiselect filterable (#…

…11415) * feat(react): added input change callback to multiselect filterable * chore(react): removed story changes for previous version * chore(project): update snaps * chore(react): updated handleOnInputValueChange to remove type param Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 17, 2022 · 606664e · 606664e
1 parent 84b57db
commit 606664e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3154,6 +3154,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "onInputValueChange": Object {
+        "type": "func",
+      },
       "onMenuChange": Object {
         "type": "func",
       },
@@ -4339,6 +4342,9 @@ Map {
         "onChange": Object {
           "type": "func",
         },
+        "onInputValueChange": Object {
+          "type": "func",
+        },
         "onMenuChange": Object {
           "type": "func",
         },

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -110,6 +110,12 @@ export default class FilterableMultiSelect extends React.Component {
      */
     onChange: PropTypes.func,
 
+    /**
+     * `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange: PropTypes.func,
+
     /**
      * `onMenuChange` is a utility for this controlled component to communicate to a
      * consuming component that the menu was opened(`true`)/closed(`false`).
@@ -259,6 +265,10 @@ export default class FilterableMultiSelect extends React.Component {
   };
 
   handleOnInputValueChange = (inputValue, { type }) => {
+    if (this.props.onInputValueChange) {
+      this.props.onInputValueChange(inputValue);
+    }
+
     if (type !== Downshift.stateChangeTypes.changeInput) {
       return;
     }

diff --git a/packages/react/src/components/MultiSelect/next/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/next/FilterableMultiSelect.js
@@ -44,6 +44,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
     itemToString,
     light,
     locale,
+    onInputValueChange,
     open,
     onChange,
     onMenuChange,
@@ -165,6 +166,10 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
   }
 
   function handleOnInputValueChange(inputValue, { type }) {
+    if (onInputValueChange) {
+      onInputValueChange(inputValue);
+    }
+
     if (type !== Downshift.stateChangeTypes.changeInput) {
       return;
     }
@@ -515,6 +520,12 @@ FilterableMultiSelect.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * `onInputValueChange` is a utility for this controlled component to communicate to
+   * the currently typed input.
+   */
+  onInputValueChange: PropTypes.func,
+
   /**
    * `onMenuChange` is a utility for this controlled component to communicate to a
    * consuming component that the menu was opened(`true`)/closed(`false`).