From fcc64362b8252c1e9d6f48273ecf6f195f91a22b Mon Sep 17 00:00:00 2001
From: Robin Zigmond <robin.zigmond@sage.com>
Date: Thu, 23 Apr 2026 16:22:22 +0100
Subject: [PATCH] fix(filterable-select): refactor updateValues to avoid
 rerender issue

refactor updateValues to not use a functional state update, which is unnecessary here. The calling
of other state update functions inside this function is likely to be the cause of recursive rerender
issues that we are seeing.

fix #7919
---
 .../filterable-select.component.tsx           | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/components/select/filterable-select/filterable-select.component.tsx b/src/components/select/filterable-select/filterable-select.component.tsx
index 29e5344b13..613c5664d0 100644
--- a/src/components/select/filterable-select/filterable-select.component.tsx
+++ b/src/components/select/filterable-select/filterable-select.component.tsx
@@ -204,44 +204,44 @@ export const FilterableSelect = React.forwardRef<
 
     const updateValues = useCallback(
       (newFilterText: string, isDeleteEvent: boolean) => {
-        setSelectedValue(() => {
-          const trimmed = newFilterText.trimStart();
-          const match = findElementWithMatchingText(
-            trimmed,
-            children,
-          ) as React.ReactElement;
-          const isFilterCleared = isDeleteEvent && !newFilterText.length;
-
-          if (!match || isFilterCleared || match.props.disabled) {
-            setTextValue(newFilterText);
-            triggerChange("", false);
-
-            return "";
-          }
+        const trimmed = newFilterText.trimStart();
+        const match = findElementWithMatchingText(
+          trimmed,
+          children,
+        ) as React.ReactElement;
+        const isFilterCleared = isDeleteEvent && !newFilterText.length;
+
+        if (!match || isFilterCleared || match.props.disabled) {
+          setTextValue(newFilterText);
+          triggerChange("", false);
+
+          setSelectedValue("");
+          return;
+        }
 
-          if (trimmed.length) {
-            triggerChange(match.props.value, false);
-          }
+        if (trimmed.length) {
+          triggerChange(match.props.value, false);
+        }
 
-          if (isDeleteEvent) {
-            setTextValue(newFilterText);
+        if (isDeleteEvent) {
+          setTextValue(newFilterText);
 
-            return match.props.value;
-          }
+          setSelectedValue(match.props.value);
+          return;
+        }
 
-          if (
-            trimmed.length &&
-            match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())
-          ) {
-            setTextValue(match.props.text);
-          } else {
-            setTextValue(newFilterText);
-          }
+        if (
+          trimmed.length &&
+          match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())
+        ) {
+          setTextValue(match.props.text);
+        } else {
+          setTextValue(newFilterText);
+        }
 
-          setHighlightedValue(match.props.value);
+        setHighlightedValue(match.props.value);
 
-          return match.props.value;
-        });
+        setSelectedValue(match.props.value);
       },
       [children, triggerChange],
     );