<input :is="textarea"> broken

[pi0]

Version

2.4.2

Reproduction link

https://jsfiddle.net/pi0/qnvcgujb

Steps to reproduce

This is working with 2.3 but not 2.4 anymore: (see provided fiddles)

<input v-model="value" is="textarea"/>

What is expected?

This was the behavior of 2.3.x:

https://jsfiddle.net/pi0/yL4rwesh

What is actually happening?

When using :is="textarea" to dynamically change input type to a text area neither :value or v-model are not working anymore. (There is also a common case for both which <component :is="..." is not working)

---

Using dynamic components is a common usage for component libraries like BootrapVue which user can dynamically change elements behavior. here is the current implementation we are falling back to v-if/v-else as a fix, But is it an intentional breaking change?

[posva]

Didn't @Akryum wrote a similar issue (cannot rely find it on the phone)?

[posva]

Nvmd, it was something different

⚠️ component + is + textarea/input + v-model wasn't working before either because v-model is different for components.

the input + is is now behaving as a component + is (instead of treating it as an input) which is why I marked this as a regression
I still haven't checked if we introduced that to fix something else 😅

[mosinve]

Will #6344 fix this issue?

[nickmessing]

@mosinve, no, it doesn't.

[defcc]

vue/src/platforms/web/compiler/directives/model.js

Lines 43 to 55 in a1d1145

	if (el.component) {
	genComponentModel(el, value, modifiers)
	// component v-model doesn't need extra runtime
	return false
	} else if (tag === 'select') {
	genSelect(el, value, modifiers)
	} else if (tag === 'input' && type === 'checkbox') {
	genCheckboxModel(el, value, modifiers)
	} else if (tag === 'input' && type === 'radio') {
	genRadioModel(el, value, modifiers)
	} else if (tag === 'input' || tag === 'textarea') {
	genDefaultModel(el, value, modifiers)
	} else if (!config.isReservedTag(tag)) {

It seems this commit breaked it. a1d1145#diff-2cd940df9e3891fae0a25ee85235edcdR486

[defcc]

Maybe we could check whether el.component is a real custome component before apply the genComponentModel method ? @posva

This could be a nice first contribution, I'll try to fix it over the weekend in case someone wants to have a try.

[posva]

@defcc Agree on all the points!

[yyx990803]

@defcc The problem with that idea is el.component can be an expression with dynamic :is bindings, so we don't really know at compile time whether it is a component or not.

The original intention of is is really only meant for dynamic component switching, and in some cases allowing "upgrading" a normal element to a component (primarily for when using in-dom template + where HTML has element placement restrictions, e.g. trying to use a component inside <table>). So somehow I feel the current behavior sticks to that intention better...

Unfortunately, the fix by @cwang22 in #6453 will break cases where users are casting <input> into a custom component with is.

For specific cases like component libs, it's probably better to manually handle events instead of using v-model for finer-grained control.

@pi0 I looked at the latest bootstrap-vue code and it seems form-input and form-textarea are split into separate components, which I think is a better direction.

[pi0]

Thanks @yyx990803 for good explanation about :is directive :)