issue with updating textarea state?

[maximilianschmitt]

I've modified the getting started code to keep it as minimal as possible:

Expected behavior

When I click reset, I'm expecting the textarea's value to be an empty string:

Actual behavior

Steps to reproduce behavior

Use this code to get the buggy application to work:

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

app.model({
  state: { title: 'Not quite set yet' },
  reducers: {
    update: (data, state) => ({ title: data }),
    reset: (data, state) => ({ title: '' })
  }
})

const mainView = (state, prev, send) => html`
  <main>
    <h1>Title: ${state.title}</h1>
    <textarea
      type="text"
      oninput=${(e) => send('update', e.target.value)}
    >${state.title}</textarea>
    <button onclick=${(e) => send('reset')}>reset</textarea>
  </main>
`

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

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

Add value=${state.title} to the textarea to get the desired behaviour.

[yoshuawuyts]

Hey there, thanks for opening this. Yeah, ran into this last week too. I think this is a bug in morphdom; it might be worth raising it there. Thanks!

[ahdinosaur]

i recently ran into this bug: Raynos/min-document#42, related but only when you do tree.toString().

[maximilianschmitt]

Thanks @yoshuawuyts. I tried to reproduce the issue with morphdom and bel but everything works as expected there:

'use strict'

const bel = require('bel')
const morphdom = require('morphdom')

window.value = 'hello'

const textarea = renderTextarea(window.value)
const button = renderButton()

document.body.appendChild(textarea)
document.body.appendChild(button)

function renderTextarea (value) {
  return bel`<textarea oninput=${onInput}>${value}</textarea>`

  function onInput (e) {
    window.value = e.target.value
    render()
  }
}

function renderButton () {
  return bel`<button onclick=${reset}>reset</button>`

  function reset () {
    window.value = ''
    render()
  }
}

function render () {
  morphdom(textarea, renderTextarea(window.value))
}

Any other ideas what the issue might be here?

[yoshuawuyts]

@maximilianschmitt a morphdom patch was released 18 hours ago (you posted it 10 hours ago) - maybs it got fixed?

[maximilianschmitt]

Yes, works with newest morphdom thanks! :) can we expect an update to choo soon? :)

[yoshuawuyts]

@maximilianschmitt the patch for morphdom was published as a minor version so if you reinstall choo (without cache) it should pop up there real nicely

[maximilianschmitt]

@yoshuawuyts Thanks! Unfortunately this isn't working. I tried npm cache clear and npm i choo --cache-min=0 but I'm getting [email protected].

[yoshuawuyts]

@maximilianschmitt oh damn, you're right - this is the issue max-mapper/yo-yo#44

[yoshuawuyts]

[email protected] landed in max-mapper/yo-yo#51 - this should all be solved now! ✨

[emanchado]

Hm, I don't know if I'm doing something wrong, but the example above does NOT work for me (the reset button doesn't change the value of the textarea) with the latest Choo / yo-yo / morphdom:

emanchado@pankhurst:~/tmp/choo-bug$ npm ls choo
/home/emanchado/tmp/choo-bug
└── [email protected] 

emanchado@pankhurst:~/tmp/choo-bug$ npm ls yo-yo
/home/emanchado/tmp/choo-bug
└─┬ [email protected]
  └── [email protected] 

emanchado@pankhurst:~/tmp/choo-bug$ npm ls morphdom
/home/emanchado/tmp/choo-bug
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected] 

emanchado@pankhurst:~/tmp/choo-bug$ node --version
v6.2.1

No feedback, no JavaScript error on the console... Any ideas?

[yoshuawuyts]

@emanchado odd, yeah can confirm. Still seems like a morphdom issue - would you mind raising it there?

edit: requirebin link

[emanchado]

@yoshuawuyts did you see this? patrick-steele-idem/morphdom#88 (comment) Should I open a yo-yo issue instead?

[yoshuawuyts]

@emanchado yeah reckon that might be good