justin-schroeder / arrow-js

Reactivity without the framework
https://arrow-js.com
MIT License
2.32k stars 50 forks source link

FYI: textarea behavior is very funky if you try to put HTML inside it rather than using the 'value' attribute #71

Open irskep opened 1 year ago

irskep commented 1 year ago

I tried doing this:

  import { reactive, html } from 'https://esm.sh/@arrow-js/core';
  const data = reactive({value: "123"})
  html`
  <textarea>${() => data.value}</textarea>
  `(document.body);

As you may already know, it doesn't work:

Screen Shot 2023-04-22 at 8 26 09 PM

However, the workaround (use the value attribute) isn't documented in a way that would have pointed me at the correct behavior. I pieced it together from the changelog and an unrelated GitHub issue.

peacememories commented 1 year ago

These are the delimiters placed inside the html string by the t function to help find the places stuff needs to be bound to in the DOM. Since the <textarea> element looks like an element that takes children, but actually only takes text, the usual way to strip these comments out of the generated DOM don't work I think. This could probably be fixed (or a warning could be introduced) in the fragment function. Of course I've only just begun reading through the code as an outsider 😅

justin-schroeder commented 1 year ago

Hmm, good point....this could use a bit of additional work.