Skip to content

[Bug]: Inconsistent modelValue types in DatePicker and semilar components #2600

@ReVoid

Description

@ReVoid

Environment

Developement/Production OS: MacOS Tahoe 26.4 (25E246)
Node version: v20.12.0
Package manager: pnpm v8.15.6
Reka UI version: 2.9.6
Vue version: 3.5.32
Client OS: MacOS Tahoe 26.4
Browser: Chrome 146.0.7680.178 (arm64)
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

TS Playground

Steps to reproduce

See reproduction link, read types provided.

Describe the bug

modelValue types across date picker components are inconsistent in how they represent empty values.

This leads to type incompatibilities and may cause unexpected behavior when implementing a custom update:modelValue event handler.

For example:

// Includes null
DatePickerRootProps['modelValue']; // DateValue | null | undefined

// But a similar component does not
MonthPickerRootProps['modelValue']; // DateValue | DateValue[] | undefined

// Another component does not include `null`
YearPickerRootProps['modelValue']; // DateValue | DateValue[] | undefined

// But its range version does
MonthRangePickerRootProps['modelValue']; // DateRange | null | undefined
// Range emits do not include empty values, even though the value can be cleared by the user
DateRangePickerRootEmits['update:modelValue']; // [date: DateRange]
YearRangePickerRootEmits['update:modelValue']; // [date: DateRange]
MonthRangePickerRootEmits['update:modelValue']; // [date: DateRange]

P.S.
I would omit null as an empty value and keep only undefined as it is the default "empty" value in JavaScript. Having multiple "empty" types often leads to redundant handling logic.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions