fix: #7330, AutoComplete: Selected item is not getting highlighted wh…

…en visited again unlike Dropdown component (#7331) * fix: #7330, AutoComplete: Selected item is not getting highlighted when visited again unlike Dropdown component * fix: #7330, AutoComplete: Selected item is not getting highlighted when visited again unlike Dropdown component * fix: #7330, AutoComplete: Selected item is not getting highlighted when visited again unlike Dropdown component --------- Co-authored-by: ANTONA09 <[email protected]>
primefaces · Oct 14, 2024 · 57f2917 · 57f2917
1 parent fb03057
commit 57f2917
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js
@@ -34,7 +34,8 @@ const classes = {
     listWrapper: 'p-autocomplete-items-wrapper',
     list: ({ virtualScrollerOptions, options }) => (virtualScrollerOptions ? classNames('p-autocomplete-items', options.className) : 'p-autocomplete-items'),
     emptyMessage: 'p-autocomplete-item',
-    item: ({ suggestion, optionGroupLabel }) => (optionGroupLabel ? classNames('p-autocomplete-item', { 'p-disabled': suggestion.disabled }) : classNames('p-autocomplete-item', { 'p-disabled': suggestion.disabled })),
+    item: ({ suggestion, optionGroupLabel, selected }) =>
+        optionGroupLabel ? classNames('p-autocomplete-item', { 'p-disabled': suggestion.disabled }, { selected: selected }) : classNames('p-autocomplete-item', { 'p-disabled': suggestion.disabled }, { 'p-highlight': selected }),
     itemGroup: 'p-autocomplete-item-group',
     footer: 'p-autocomplete-footer',
     transition: 'p-connected-overlay'

diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
@@ -78,14 +78,22 @@ export const AutoCompletePanel = React.memo(
             );
         };
 
+        const isOptionSelected = (item) => {
+            if (props.selectedItem && props.selectedItem.current && Array.isArray(props.selectedItem.current)) {
+                return props.selectedItem.current.some((selectedItem) => ObjectUtils.deepEquals(selectedItem, item));
+            } else {
+                return ObjectUtils.deepEquals(props.selectedItem.current, item);
+            }
+        };
+
         const createListItem = (item, key, index, listItemProps) => {
-            const selected = ObjectUtils.deepEquals(props.selectedItem, item);
+            const selected = isOptionSelected(item);
             const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, item, index) : props.field ? ObjectUtils.resolveFieldData(item, props.field) : item;
             const itemProps = mergeProps(
                 {
                     index: index,
                     role: 'option',
-                    className: cx('item', { optionGroupLabel: props.optionGroupLabel, suggestion: item }),
+                    className: cx('item', { optionGroupLabel: props.optionGroupLabel, suggestion: item, selected: selected }),
                     onClick: (e) => props.onItemClick(e, item),
                     'aria-selected': selected,
                     ...listItemProps