From a662f2733c6282725282b9d8768b3b67c35dc586 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Mon, 23 Dec 2024 00:55:53 +0000
Subject: [PATCH] Fixed #7522 - How to format the selected item in Autocomplete

---
 components/lib/autocomplete/AutoComplete.js   | 10 ++++++----
 components/lib/autocomplete/autocomplete.d.ts |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index a51b764225..63176353b1 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -152,13 +152,15 @@ export const AutoComplete = React.memo(
             selectedItem.current = ObjectUtils.isNotEmpty(value) ? value : null;
         };
 
-        const formatValue = (value, useTemplate = false) => {
+        const formatValue = (value) => {
             if (ObjectUtils.isEmpty(value)) return '';
 
             if (typeof value === 'string') return value;
 
-            if (useTemplate && props.selectedItemTemplate) {
-                return ObjectUtils.getJSXElement(props.selectedItemTemplate, value) || value;
+            const valueFromTemplate = ObjectUtils.getJSXElement(props.selectedItemTemplate, value);
+
+            if (typeof valueFromTemplate === 'string') {
+                return valueFromTemplate;
             }
 
             if (props.field) {
@@ -604,7 +606,7 @@ export const AutoComplete = React.memo(
 
                     return (
                         <li key={key} {...tokenProps}>
-                            <span {...tokenLabelProps}>{formatValue(val, true)}</span>
+                            <span {...tokenLabelProps}>{formatValue(val)}</span>
                             {removeTokenIcon}
                         </li>
                     );
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
index 7cdbf29d39..c7981c5c59 100755
--- a/components/lib/autocomplete/autocomplete.d.ts
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -406,7 +406,7 @@ export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.In
     /**
      * Template of a selected item.
      */
-    selectedItemTemplate?: React.ReactNode | ((value: any) => React.ReactNode);
+    selectedItemTemplate?: string | undefined | null | ((value: any) => string | undefined | null);
     /**
      * Whether to show the empty message or not.
      * @defaultValue false