Textarea with state based content about uhtml HOT 5 CLOSED

I think what you want there is to use the value, like you'd do with an input:

import {render, html} from 'https://unpkg.com/uhtml?module';

var text = "Hi";

const update = function(e) {
  text = e.currentTarget.value;
  refresh();
  e.preventDefault();
}

const resetText = function() {
  text = '';
  refresh();
}

const refresh = () => {
  render(document.querySelector('#content'), html`
    <h1>${text}</h1>
    <textarea onkeyup=${update} value=${text} />
    <button onclick=${resetText}>Reset</button>
  `);
}

refresh();

this works for me, on keyup/down anything 👋

from uhtml.

Ok sure, looks obvious now...
Just to be correct, I'd say you forgot the dot before the value attribute in the snippets.

Thanks for your answer !

from uhtml.

the dot in this case is not necessary, and the guard is different: attributes don't get changed at all if the value is the same (i.e. you just press arrow to move the cursor) while .value=${...} would invoke the setter every single time, which might be a waste of CPU if the browser is not smart about it.

from uhtml.

Hum, without the dot, the attribute value is indeed correct but the diplayed content of the textarea is not.
It's empty on first render, and doesn't reset once updated.

from uhtml.

@Spope use the dot then, I probably haven't paid enough attention to this detail, apologies.

from uhtml.