vuetifyjs/vuetify

[Bug Report][3.8.12] Global configuration - contextual defaults for nested components - (VSelect > VChip > clearable)

Open

#21699 opened on Jul 4, 2025

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (40,995 stars) (7,139 forks)batch import
E: defaultsT: bughelp wanted

Description

Environment

Vuetify Version: 3.8.12 Vue Version: 3.5.13 Browsers: Chrome 137.0.0.0 OS: Windows 10

Steps to reproduce

  1. In the createVuetify config, provide defaults properties (eg. prepend-icon, closable) for a nested component (eg. VChip), in the context of another component (eg. VSelect).
  2. Use overridden component (eg. VSelect) into templates.

Expected Behavior

All defaults properties for nested component should be taken into account. In the provided reproduction link the closable property is not taken into account, whereas the prepend-icon one is.

Actual Behavior

Only a part of defaults properties for nested component are taken into account.

Reproduction Link

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

Contributor guide

Tech stack
typescriptvue
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
Basic understanding of Vue component structureFamiliarity with Vuetify's global defaults configuration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
The bug is that when setting defaults in createVuetify for nested components like VChip inside VSelect, only some properties (e.g., prepend icon) are applied but not others (e.g., closable). Investigate Vuetify's defaults merging logic in the source code, likely in files related to component defaults (e.g., src/framework/src/util/defaults.ts). Check how nested component contexts (e.g., VSelect's children like VChip) retrieve and merge defaults. The reproduction link provides a minimal example that can be debugged by stepping through the defaults resolution during component creation.