contentedtiable elements.

const choo = require('choo')
const app = choo()

app.model({
  state: { title: 'Set the title' },
  reducers: {
    update: (action, state) => ({ title: action.value })
  }
})

const mainView = (params, state, send) => choo.view`
  <main>
    <h1>${state.title}</h1>
    <div
      contenteditable="true"
      oninput=${(e) => send('update', { value: e.target.value })}>Type here</div>
  </main>
`

app.router((route) => [
  route('/', mainView)
])

const tree = app.start()
document.body.appendChild(tree)

Doesn’t update the state, missing something?

[toddself]

This works:

const choo = require('choo')
const app = choo()

app.model({
  state: { title: 'Set the title' },
  reducers: {
    update: (action, state) => ({ title: action.value })
  }
})

const mainView = (params, state, send) => choo.view`
  <main>
    <h1>${state.title}</h1>
    <div
      contenteditable="true"
      oninput=${(e) => send('update', { value: e.target.innerText })}>${state.title}</div>
  </main>
`

app.router((route) => [
  route('/', mainView)
])

const tree = app.start()
document.body.appendChild(tree)

The reason is that you’re sending the value of the <div> but not changing it. Every call to oninput causes the DOM to update based on the current value of the state.

So you delete the type here and it sends an oninput with e.target.innerText equal to '', and updates the state. Then it re-renders. But you haven’t changed what the input value for the contenteditable is, so it’s still type here when you go to type in it.

You delete, it sends, resets to type here, rerenders, etc.

You need to track the state in the element which is sending the updates as well since the state is the source of truth, not the DOM.

[timwis]

<div>s don’t have a value property - your looking for innerText. Here’s an example of a content editable div in a choo app.