diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js index e2aee24cbc..7382dd4641 100644 --- 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 index e1026cf0c7..6426f3082f 100644 --- 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