Hyperapp: Calling action in event handler leads to infinite loop

[talelamira]

I don't think that I'm posting in the right place, but resources are very limited for hyperapp.

I'm a beginner with this framework and I want to continue with it because I found that Vue, React, etc. are way too complex for my needs.

My app is an invoice. I created a table with cell that displays state values, but are also editable. The problem I ran into is an infinite loop. The state update the cell, the cell updates the state.

Here's my code:

jsx <td id="nb-hours" align="right" contenteditable="true" onfocusout={actions.updateNbHours(this.innerText)} > {state.nbHours} </td>

I'm sure that this is not the correct way to do it, any help?

[zaceno]

Try this:

<td id="nb-hours" align="right" contenteditable="true" onfocusout={
         event => actions.updateNbHours(event.target.innerText)
       }>{state.nbHours}</td>

I'm just winging it, but I think that should work. At least you won't get an infinite loop :) The reason for your infinite loop is you are calling actions.updateNBHours(...) immediately when the node is calculated in the view. onfocusout should be a function (which receives the event object)

[zaceno]

If you have other support-questions, the best place to go is to join the slack

We're very friendly :)

[jorgebucaran]

👋 Hi, @talelamira! It seems you forgot a () =>. V1 event handlers are functions receiving the event data, so you probably want to do as @zaceno suggested.

• onfocusout ={actions.doSomething(withData)}
• onfocusout ={() => actions.doSomething(withData)}

[talelamira]

Thanks a lot. It works!
I'm not very slack, but I have a good reason now to open that forgotten app on my devices :)