Skip to content

Type error when passing null to v-model on textarea #9904

Closed
@jods4

Description

@jods4

Vue version

3.3.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9kUFLAzEQhf/KmMsq1C7SW9kWtBTUQxUVvOSybKfbrdkkJJNaWPe/O0mpLig9znsvk29mOnFr7XgfUExF4SvXWAKPFCyoUtczKchLMZe6aa1xBB043EAPG2dayPhZJrXUldGeoPU1zKJfeHKNruELdFBqfpndo1IG3o1T64vsSuoiP/7EfbkgbK0qCbkCKLY3865Lvfq+yLlKKuGBSocl7K9bs0bFYByRAnL2i3zQQowYmYE2TT3eeaN5ri62kKIyrW0UuidLDQNLMYXkRK9kwM/HpJELODrp1Rarj3/0nT9ETYpnhx7dHqX48Ri0Rjray9cVkw9Mpg+K02fMF/RGhch4jN0FvWbsQS7ut6IVL3cR+f7ipXEe0sn4EG9+eSDU/jR1jMZkn/JS8BkXZ3bzO89kPEnvpO5F/w0xQrzd

Steps to reproduce

In TS with strict null checks, try to pass a null value to v-model on a textarea.

What is expected?

Works ok and no type error.

What is actually happening?

Works ok but type error because null is not an acceptable type.
image

The cause for this is that runtime-dom ships the following type:

export interface TextareaHTMLAttributes extends HTMLAttributes {
    // other attrs removed for brievity
    value?: string | ReadonlyArray<string> | number;
}

I think you should add null as a valid type here.
The W3C documentation even has a special mention for it!
From https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element:
image

That [LegacyNullToEmptyString] annotation indicates that when null is assigned, instead of converting to string the default JS way (which results in the string "null") the value must be converted to an empty string instead ("").

System Info

See Playground repro.

Any additional comments?

This was previously reported in #7737 which was closed a little too quickly in my opinion.
The OP suggested typing as any, which @sodatea dismissed (rightly so), but the case of null (which was mentionned as a repro) wasn't specifically addressed.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions