From 7c6439280e9686f46e787ed0bc1ac5b70b954edf Mon Sep 17 00:00:00 2001
From: Zhaolin Liang <develop0304@outlook.com>
Date: Tue, 7 May 2024 23:40:34 +0800
Subject: [PATCH] fix(VDataTable): correctly update the value of showSelectAll
 (#19762)

fixes #19069
---
 .../components/VDataTable/VDataTableHeaders.tsx    |  2 +-
 .../VDataTable/__tests__/VDataTable.spec.cy.tsx    | 14 ++++++++++++++
 .../components/VDataTable/composables/select.ts    |  3 ++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
index c2755cd9619..d075842d788 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -180,7 +180,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
               if (slots[columnSlotName]) return slots[columnSlotName]!(columnSlotProps)
 
               if (column.key === 'data-table-select') {
-                return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && (
+                return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && (
                   <VCheckboxBtn
                     modelValue={ allSelected.value }
                     indeterminate={ someSelected.value && !allSelected.value }
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
index 18eb35f1008..0cc1a79df2c 100644
--- a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
+++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
@@ -213,6 +213,20 @@ describe('VDataTable', () => {
       .should('deep.equal', [[2], [1]])
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19069
+  it('should update the select all checkbox when changing the select-strategy', () => {
+    const strategy = ref('single')
+    cy.mount(() => (
+      <Application>
+        <VDataTable select-strategy={ strategy.value } items={ DESSERT_ITEMS } headers={ DESSERT_HEADERS } showSelect />
+      </Application>
+    )).get('thead .v-selection-control').should('not.exist')
+      .then(() => strategy.value = 'all')
+      .get('thead .v-selection-control').should('exist')
+      .then(() => strategy.value = 'page')
+      .get('thead .v-selection-control').should('exist')
+  })
+
   describe('slots', () => {
     it('should have top slot', () => {
       cy.mount(() => (
diff --git a/packages/vuetify/src/components/VDataTable/composables/select.ts b/packages/vuetify/src/components/VDataTable/composables/select.ts
index 419aecef2fb..fcea69f19a7 100644
--- a/packages/vuetify/src/components/VDataTable/composables/select.ts
+++ b/packages/vuetify/src/components/VDataTable/composables/select.ts
@@ -163,6 +163,7 @@ export function provideSelection (
     })
     return !!items.length && isSelected(items)
   })
+  const showSelectAll = computed(() => selectStrategy.value.showSelectAll)
 
   const data = {
     toggleSelect,
@@ -172,7 +173,7 @@ export function provideSelection (
     isSomeSelected,
     someSelected,
     allSelected,
-    showSelectAll: selectStrategy.value.showSelectAll,
+    showSelectAll,
   }
 
   provide(VDataTableSelectionSymbol, data)