Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Textarea's initial value is emptied in component if it contains html tags #5121

Closed
schtr4jh opened this issue Mar 7, 2017 · 4 comments
Closed

Textarea's initial value is emptied in component if it contains html tags #5121

schtr4jh opened this issue Mar 7, 2017 · 4 comments
Labels
contribution welcome improvement

Comments

@schtr4jh
Copy link
Contributor

schtr4jh commented Mar 7, 2017 •
edited

Jsfiddle vue v2.2.1: https://jsfiddle.net/dobuznsc/1/
Jsfiddle vue v1.0.12: https://jsfiddle.net/dobuznsc/2/

As you can see, there're 3 textareas and inputs in 3 different scopes:

  • out of vue / body scope: textarea and input values as preserved, as expected
  • root vue instance scope: textarea and input values are preserved, as expected
  • component scope: input value is preserved, textarea's is not (in v2), however, they are preserved in v1

My question is, why are textareas in root and component scope handled differently, is this a bug?
@posva posva changed the title Textarea's initial value is emptied in component, but not in root scope Textarea's initial value is emptied in component if it contains html tags Mar 7, 2017
@posva
Copy link
Member

posva commented Mar 7, 2017

Because the component template is compiled by vue while the other one is interpreted by the browser before vue can compile it.
Inside of textareas only text can be entered, therefore when Vue tries to put HTML inside of it, the browser probably ignores that. What you actually want is to write an escaped version of it: <textarea>&lt;p&gt;Component textarea&lt;/p&gt;</textarea>

Maybe we could add a development warning, but basically, you cannot write unescaped HTML inside of a textarea. More specifically, you can only write text. The browser escapes it for convenience I guess.

@schtr4jh
Copy link
Contributor Author

schtr4jh commented Mar 7, 2017

Great, makes sense, it works with escaped HTML. I didn't even think about escaping since it worked in v1.

@yyx990803
Copy link
Member

Technically we can make the HTML parser treat the entire content of <textarea> as a string. This could use a PR if anyone is up for it.

@nickmessing
Copy link
Member

I can try that, I'm not sure I will manage to do that but I will try

HerringtonDarkholme added a commit to HerringtonDarkholme/vue that referenced this issue Mar 9, 2017
@HerringtonDarkholme
fix vuejs#5121: parse content in textarea as plaintext
cac41df
@HerringtonDarkholme HerringtonDarkholme mentioned this issue Mar 9, 2017
Merged
yyx990803 pushed a commit that referenced this issue Mar 10, 2017
@HerringtonDarkholme @yyx990803
fix #5121: parse content in textarea as plaintext (#5143)
8fca83d 
* fix #5121: parse content in textarea as plaintext

* update comment
awamwang added a commit to awamwang/vue that referenced this issue Mar 16, 2017
@awamwang
Merge branch 'dev' of https://github.com/vuejs/vue into dev
b63e816 
* 'dev' of https://github.com/vuejs/vue: (118 commits)
  [weex] Support unary and left open tags (vuejs#5052)
  [release] 2.2.4
  [build] 2.2.4
  fix perf measure regression for nested components of the same name (fix vuejs#5181)
  [release] 2.2.3
  [build] 2.2.3
  perf code coverage
  improve camelCase prop warning message
  warn when template contains text outside root element (vuejs#5164)
  Warn when not passing props in kebab-case (vuejs#5161)
  turn off perf timeline measuring by default + reduce its impact on dev time perf (fix vuejs#5174)
  v-bind object should have lower priority than explicit bindings (fix vuejs#5150)
  fix custom directive arg fall through (fix vuejs#5162)
  formatting tweaks
  refactor create-component
  fix wrong order of generate modifier code (vuejs#5147)
  fix v-on unit test (vuejs#5144)
  fix vuejs#5121: parse content in textarea as plaintext (vuejs#5143)
  [release] 2.2.2
  [build] 2.2.2
  ...

# Conflicts:
#	dist/vue.runtime.common.js
#	src/core/vdom/helpers/update-listeners.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
contribution welcome improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@schtr4jh @yyx990803 @posva @nickmessing