Fixed #7522 - How to format the selected item in Autocomplete

primefaces · Dec 23, 2024 · a662f27 · a662f27
1 parent 2206295
commit a662f27
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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