From 84b4e92af00663b4b7a7db3a1ff600d75a3a07fc Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Fri, 11 Oct 2024 19:41:56 +0530 Subject: [PATCH 1/3] fix: #7330, AutoComplete: Selected item is not getting highlighted when visited again unlike Dropdown component --- components/lib/autocomplete/AutoCompleteBase.js | 7 ++++++- components/lib/autocomplete/AutoCompletePanel.js | 12 ++++++++++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js index e2aee24cbc..fcb5fdc5e0 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 }, { selected: selected }), itemGroup: 'p-autocomplete-item-group', footer: 'p-autocomplete-footer', transition: 'p-connected-overlay' @@ -84,6 +85,10 @@ const styles = ` padding: 0; list-style-type: none; } + + .selected { + background-color: rgba(6, 182, 212, 0.24) !important; + } .p-autocomplete-item { cursor: pointer; 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 From bcb63bd08075501926c3ab52cb0f2b19112da47e Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Fri, 11 Oct 2024 19:48:53 +0530 Subject: [PATCH 2/3] fix: #7330, AutoComplete: Selected item is not getting highlighted when visited again unlike Dropdown component --- components/lib/autocomplete/AutoCompleteBase.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js index fcb5fdc5e0..75169abd4e 100644 --- a/components/lib/autocomplete/AutoCompleteBase.js +++ b/components/lib/autocomplete/AutoCompleteBase.js @@ -35,7 +35,7 @@ const classes = { list: ({ virtualScrollerOptions, options }) => (virtualScrollerOptions ? classNames('p-autocomplete-items', options.className) : 'p-autocomplete-items'), emptyMessage: 'p-autocomplete-item', item: ({ suggestion, optionGroupLabel, selected }) => - optionGroupLabel ? classNames('p-autocomplete-item', { 'p-disabled': suggestion.disabled }, { selected: selected }) : classNames('p-autocomplete-item', { 'p-disabled': suggestion.disabled }, { selected: 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' @@ -86,7 +86,7 @@ const styles = ` list-style-type: none; } - .selected { + .p-highlight { background-color: rgba(6, 182, 212, 0.24) !important; } From 391236bbf9cfc31369d3ede9dfe3473232951472 Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Mon, 14 Oct 2024 12:38:43 +0530 Subject: [PATCH 3/3] fix: #7330, AutoComplete: Selected item is not getting highlighted when visited again unlike Dropdown component --- components/lib/autocomplete/AutoCompleteBase.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js index 75169abd4e..7382dd4641 100644 --- a/components/lib/autocomplete/AutoCompleteBase.js +++ b/components/lib/autocomplete/AutoCompleteBase.js @@ -85,10 +85,6 @@ const styles = ` padding: 0; list-style-type: none; } - - .p-highlight { - background-color: rgba(6, 182, 212, 0.24) !important; - } .p-autocomplete-item { cursor: pointer;