fix(defaults): skip undefined values

KaelWD · KaelWD · commit 2a7485964de4 · 2026-01-27T17:54:46.000+11:00
fixes #17845
diff --git a/packages/docs/src/pages/en/getting-started/upgrade-guide.md b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
@@ -367,3 +367,21 @@ Removed the **$text-field-details-padding-inline** Sass variable.
 +  $input-details-padding-inline: <value>
 );
 ```
+
+## Defaults
+
+`undefined` values are now skipped when merging prop defaults. This button would have been grey in v3, but is now green:
+
+```jsx
+createVuetify({
+  defaults: {
+    VBtn: { color: 'green' },
+  },
+})
+
+<VDefaultsProvider :defaults="{ VBtn: { color: undefined }}">
+  <VBtn />
+</VDefaultsProvider>
+```
+
+Replace `undefined` with `null` if you do actually want it to override the global default value.
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx b/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx
@@ -126,9 +126,9 @@ export const VColorPicker = defineComponent({
 
     provideDefaults({
       VSlider: {
-        color: undefined,
-        trackColor: undefined,
-        trackFillColor: undefined,
+        color: null,
+        trackColor: null,
+        trackFillColor: null,
       },
     })
 
diff --git a/packages/vuetify/src/composables/defaults.ts b/packages/vuetify/src/composables/defaults.ts
@@ -75,7 +75,7 @@ export function provideDefaults (
     }
 
     return properties.prev
-      ? mergeDeep(properties.prev, properties)
+      ? mergeDeep(properties.prev, properties, undefined, (_, v) => v !== undefined)
       : properties
   }) as ComputedRef<DefaultsInstance>
 
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
@@ -450,6 +450,7 @@ export function mergeDeep (
   source: Record<string, any> = {},
   target: Record<string, any> = {},
   arrayFn?: (a: unknown[], b: unknown[]) => unknown[],
+  targetCondition?: (k: string, v: unknown) => boolean,
 ) {
   const out: Record<string, any> = {}
 
@@ -458,13 +459,18 @@ export function mergeDeep (
   }
 
   for (const key in target) {
-    const sourceProperty = source[key]
     const targetProperty = target[key]
 
+    if (targetCondition && !targetCondition(key, targetProperty)) {
+      continue
+    }
+
+    const sourceProperty = source[key]
+
     // Only continue deep merging if
     // both properties are plain objects
     if (isPlainObject(sourceProperty) && isPlainObject(targetProperty)) {
-      out[key] = mergeDeep(sourceProperty, targetProperty, arrayFn)
+      out[key] = mergeDeep(sourceProperty, targetProperty, arrayFn, targetCondition)
 
       continue
     }

Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@ export function provideDefaults (`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`return properties.prev`
`78`		`- ? mergeDeep(properties.prev, properties)`
	`78`	`+ ? mergeDeep(properties.prev, properties, undefined, (_, v) => v !== undefined)`
`79`	`79`	`: properties`
`80`	`80`	`}) as ComputedRef<DefaultsInstance>`
`81`	`81`