Update not occurring for looped item and click events #1770

Closed
f1ana opened this Issue May 3, 2016 · 4 comments

Projects

None yet

3 participants

@f1ana
f1ana commented May 3, 2016 edited
  1. Describe your issue:
    If you have a table, with rows looped using each={} and having their own onclick={}, some items within the loop that have their own click event do not update properly.
    In my example below, a checkbox will not update its state fully, despite the backing object taking the new value. If you use jQuery and run $(selector).attr('checked'), the DOM still sees the item as checked even though the checked attribute itself is gone.
    Removing the click event from the each loop allows the checkbox to update its state reliably.
  2. Can you reproduce the issue?
    https://jsfiddle.net/6xmunt27/4/
  3. On which browser/OS does the issue appear?
    Tested on latest Firefox and Chrome at the time of this post.
  4. Which version of Riot does it affect?
    2.3.18 w/ compiler
  5. How would you tag this issue?
    • Question
    • Bug
    • Discussion
    • Feature request
    • Tip
    • Enhancement
    • Performance

Hope this helps. Unless I'm doing something clearly wrong here, this looks like a bug.

@f1ana
f1ana commented May 3, 2016

To be clear on the use case, consider that I need the onclick on the row itself to identify which row to highlight and make a selection visible to the user.

@MartinMuzatko
Member
MartinMuzatko commented May 4, 2016 edited

Checkboxes behave a bit differently, if you bind the event to the row, there is no problem: https://jsfiddle.net/thy3usjs/

checkboxes already have an internal value for being checked or not (e.target.checked) I think you overwrite this, causing it to be always checked.

Same happens if it is always unchecked: https://jsfiddle.net/cqzpmqxz/

@f1ana
f1ana commented May 4, 2016

If you bind the event to the row and click on the checkbox, at least on latest Firefox, the issue still persists.
this.trloop[e.item.i].checked = !this.trloop[e.item.i].checked; also yields the same behavior.

@GianlucaGuarini
Member
GianlucaGuarini commented May 5, 2016 edited

@f1ana I think the issue here is that you are using the onclick event instead of onchange https://jsfiddle.net/gianlucaguarini/cqzpmqxz/1/
another issue is that riot enables the preventDefault on all the events (this may change in the next major release ) and this means that your clicks on the tr tags block the default checkbox behavior.
Returning true in your events handler should solve the issue https://jsfiddle.net/gianlucaguarini/6xmunt27/5/

More info http://riotjs.com/guide/#event-handlers

The default event handler behavior is automatically cancelled unless the element is a checkbox or radio button. This means that e.preventDefault() is already called for you, because this is what you usually want (or forget to do). You can let the browser do the default thing by returning true on the handler.

@GianlucaGuarini GianlucaGuarini referenced this issue May 9, 2016
Closed

Riot 3.0.0 roadmap #1694

14 of 16 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment