From e184926fb18e45f0c8639c7b67c9094326e847a5 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 25 Mar 2024 18:19:22 +0300
Subject: [PATCH] Different color for active item

---
 components/lib/cascadeselect/CascadeSelectSub.vue          | 2 +-
 components/lib/cascadeselect/style/CascadeSelectStyle.js   | 7 ++++---
 components/lib/themes/primeone/base/cascadeselect/index.js | 2 ++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
index 917abb5a1..cb3234570 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.vue
+++ b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
+    <ul :ref="containerRef" :class="cx('rootList')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
         <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
             <li
                 :id="getOptionId(processedOption)"
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index 326934a01..3bc2f8cff 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -34,12 +34,13 @@ const classes = {
         }
     ],
     wrapper: 'p-cascadeselect-items-wrapper',
-    list: 'p-cascadeselect-panel p-cascadeselect-items',
+    rootList: 'p-cascadeselect-items',
     item: ({ instance, processedOption }) => [
         'p-cascadeselect-item',
         {
             'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
-            'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
+            'p-cascadeselect-item-active': instance.isOptionActive(processedOption),
+            'p-highlight': instance.isOptionSelected(processedOption),
             'p-focus': instance.isOptionFocused(processedOption),
             'p-disabled': instance.isOptionDisabled(processedOption)
         }
@@ -47,7 +48,7 @@ const classes = {
     content: 'p-cascadeselect-item-content',
     text: 'p-cascadeselect-item-text',
     groupIcon: 'p-cascadeselect-group-icon',
-    sublist: 'p-cascadeselect-sublist'
+    sublist: 'p-cascadeselect-panel p-cascadeselect-sublist'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/themes/primeone/base/cascadeselect/index.js b/components/lib/themes/primeone/base/cascadeselect/index.js
index e79ba6bae..c846ed9f3 100644
--- a/components/lib/themes/primeone/base/cascadeselect/index.js
+++ b/components/lib/themes/primeone/base/cascadeselect/index.js
@@ -159,6 +159,8 @@ export default {
 
 .p-cascadeselect-item-active {
     overflow: visible;
+    background: ${dt('cascadeselect.item.focus.background')};
+    color: ${dt('cascadeselect.item.focus.color')};
 }
 
 .p-cascadeselect-item-active > .p-cascadeselect-sublist {