vuetifyjs/vuetify

[Bug Report][3.3.5] Datatable: Row selection checkbox is not highlighting the row

Open

#17670 opened on Jun 21, 2023

View on GitHub
 (10 comments) (0 reactions) (0 assignees)TypeScript (40,995 stars) (7,139 forks)batch import
C: VDataTableT: enhancementgood first issue

Description

Environment

Vuetify Version: 3.3.5 Vue Version: 3.3.4 Browsers: Chrome 111.0.0.0 OS: Windows 10

Steps to reproduce

Select on a row selection checkbox It should highlight the row but it is not

Expected Behavior

Highlight the selected row

Actual Behavior

Not highlighting the row

Reproduction Link

https://play.vuetifyjs.com/#...

Contributor guide

Tech stack
vuetypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Vue 3Vuetify 3basic understanding of data tables
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Examine the Vuetify datatable source code, particularly VDataTableRow.vue and related selection logic. The row highlight on checkbox selection is likely controlled by a CSS class (e.g., 'v data table selected') or a computed property. Check the reproduction link to confirm the bug. Look for changes between Vuetify 3.3.4 and 3.3.5 that might have caused the regression. Consider if the highlight class is being applied but overridden, or if the selection state is not updating the row's class binding.