fix(VDataTable): correctly update the value of showSelectAll (#19762)

fixes #19069
vuetifyjs · May 7, 2024 · 7c64392 · 7c64392
1 parent 49fc5c5
commit 7c64392
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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)