fix(multi-select): resolve issue with multiple execution of onFilterC…

…hange callback

src/components/select/multi-select/multi-select.component.js

@@ -28,6 +28,7 @@ import isExpectedOption from "../utils/is-expected-option";
 import isExpectedValue from "../utils/is-expected-value";
 import isNavigationKey from "../utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
+import useStableCallback from "../../../hooks/__internal__/useStableCallback";
 
 let deprecateInputRefWarnTriggered = false;
 
@@ -44,7 +45,7 @@ const MultiSelect = React.forwardRef(
       readOnly,
       children,
       onOpen,
-      onFilterChange,
+      onFilterChange: onFilterChangeProp,
       onChange,
       onClick,
       onFocus,
@@ -326,11 +327,17 @@ const MultiSelect = React.forwardRef(
       };
     }, [handleGlobalClick]);
 
+    const onFilterChange = useStableCallback(onFilterChangeProp);
+    const isFirstRender = useRef(true);
     useEffect(() => {
-      if (onFilterChange) {
+      if (onFilterChange && !isFirstRender.current) {
         onFilterChange(filterText);
       }
-    }, [filterText, onFilterChange]);
+    }, [onFilterChange, filterText]);
+
+    useEffect(() => {
+      isFirstRender.current = false;
+    }, []);
 
     function handleTextboxClick(event) {
       isMouseDownReported.current = false;

src/components/select/multi-select/multi-select.spec.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { act } from "react-dom/test-utils";
 import { mount } from "enzyme";
 
@@ -805,8 +805,8 @@ describe("MultiSelect", () => {
     });
   });
 
-  describe('when the "onFilter" prop has been passed and the input text changed', () => {
-    it("then that prop should be called", () => {
+  describe('when the "onFilter" prop has been passed', () => {
+    it("then that prop should be invoked when the input text has changed", () => {
       const filterText = "foo";
       const onFilterChangeFn = jest.fn();
       const wrapper = renderSelect({ onFilterChange: onFilterChangeFn });
@@ -816,6 +816,35 @@ describe("MultiSelect", () => {
         .simulate("change", { target: { value: filterText } });
       expect(onFilterChangeFn).toHaveBeenCalledWith(filterText);
     });
+
+    it("then it should not be invoked when the component rerenders", () => {
+      const Component = () => {
+        const [onFilterChangeCalled, setOnFilterChangeCalled] = useState(false);
+
+        return (
+          <>
+            <div id="on-filter-called">
+              {onFilterChangeCalled ? "true" : "false"}
+            </div>
+            <MultiSelect
+              name="testSelect"
+              id="testSelect"
+              onFilterChange={() => setOnFilterChangeCalled(true)}
+            >
+              <Option value="opt1" text="red" />
+              <Option value="opt2" text="green" />
+              <Option value="opt3" text="blue" />
+              <Option value="opt4" text="black" />
+            </MultiSelect>
+          </>
+        );
+      };
+
+      const wrapper = mount(<Component />);
+      expect(wrapper.find("#on-filter-called").text()).toBe("false");
+      wrapper.setProps({});
+      expect(wrapper.find("#on-filter-called").text()).toBe("false");
+    });
   });
 
   describe('when the "onSelectListClose" is called in the SelectList', () => {

src/components/select/multi-select/multi-select.test.js

@@ -1310,8 +1310,8 @@ context("Tests for Multi Select component", () => {
         .type(text)
         .then(() => {
           // eslint-disable-next-line no-unused-expressions
-          expect(callback).to.have.been.calledTwice;
-          expect(callback.getCalls()[1].args[0]).to.equals(text);
+          expect(callback).to.have.been.calledOnce;
+          expect(callback).to.have.been.calledWith(text);
         });
     });
   });