From fa5ff89a398050ed49cf1766c4a223687d9e979b Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 16 Aug 2022 13:35:06 +0100
Subject: [PATCH] Fixed #2856 - Header checkbox is not styled as expected in
 Material themes.

---
 src/components/multiselect/MultiSelect.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 9b27b8609..dc77e8a35 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -35,7 +35,7 @@
                     <span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus"></span>
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header">
-                        <div v-if="showToggleAll && selectionLimit == null" class="p-checkbox p-component" @click="onToggleAll">
+                        <div v-if="showToggleAll && selectionLimit == null" :class="headerCheckboxClass" @click="onToggleAll">
                             <div class="p-hidden-accessible">
                                 <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur">
                             </div>
@@ -947,6 +947,12 @@ export default {
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
         },
+        headerCheckboxClass() {
+            return ['p-checkbox p-component', {
+                'p-checkbox-checked': this.allSelected,
+                'p-checkbox-focused': this.headerCheckboxFocused
+            }];
+        },
         visibleOptions() {
             const options = this.optionGroupLabel ? this.flatOptions(this.options) : (this.options || []);