From c735e5b3c94bda8f936c9e7d8d160fef1fdfb1ad Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 15 May 2024 11:48:30 +0300
Subject: [PATCH] Focus visuals for chips

---
 components/lib/autocomplete/style/AutoCompleteStyle.js | 9 +++++++--
 components/lib/inputchips/style/InputChipsStyle.js     | 6 +++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index 85eb7e9c9..a9d4c80b8 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/components/lib/autocomplete/style/AutoCompleteStyle.js
@@ -178,17 +178,22 @@ const theme = ({ dt }) => `
     color: ${dt('autocomplete.disabled.color')};
 }
 
-.p-autocomplete-input-multiple .p-chip {
+.p-autocomplete-chip.p-chip {
     padding-top: calc(${dt('autocomplete.padding.y')} / 2);
     padding-bottom: calc(${dt('autocomplete.padding.y')} / 2);
     border-radius: ${dt('autocomplete.chip.border.radius')};
 }
 
-.p-autocomplete-input-multiple:has(.p-chip) {
+.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
     padding-left: calc(${dt('autocomplete.padding.y')} / 2);
     padding-right: calc(${dt('autocomplete.padding.y')} / 2);
 }
 
+.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
+    background: ${dt('inputchips.chip.focus.background')};
+    color: ${dt('inputchips.chip.focus.color')};
+}
+
 .p-autocomplete-input-chip {
     flex: 1 1 auto;
     display: inline-flex;
diff --git a/components/lib/inputchips/style/InputChipsStyle.js b/components/lib/inputchips/style/InputChipsStyle.js
index e4fe70970..98353973b 100644
--- a/components/lib/inputchips/style/InputChipsStyle.js
+++ b/components/lib/inputchips/style/InputChipsStyle.js
@@ -54,19 +54,19 @@ const theme = ({ dt }) => `
     color: ${dt('inputchips.disabled.color')};
 }
 
-.p-inputchips .p-chip {
+.p-inputchips-chip.p-chip {
     padding-top: calc(${dt('inputchips.padding.y')} / 2);
     padding-bottom: calc(${dt('inputchips.padding.y')} / 2);
     border-radius: ${dt('inputchips.chip.border.radius')};
     transition: background ${dt('transition.duration')}, color ${dt('transition.duration')};
 }
 
-.p-inputchips-chip-item.p-focus .p-chip {
+.p-inputchips-chip-item.p-focus .p-inputchips-chip {
     background: ${dt('inputchips.chip.focus.background')};
     color: ${dt('inputchips.chip.focus.color')};
 }
 
-.p-inputchips-input:has(.p-chip) {
+.p-inputchips-input:has(.p-inputchips-chip) {
     padding-left: calc(${dt('inputchips.padding.y')} / 2);
     padding-right: calc(${dt('inputchips.padding.y')} / 2);
 }