New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update not occurring for looped item and click events #1770

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

Comments

Projects
None yet
3 participants
@f1ana

f1ana commented May 3, 2016

  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

This comment has been minimized.

Show comment
Hide comment
@f1ana

f1ana 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.

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

This comment has been minimized.

Show comment
Hide comment
@MartinMuzatko

MartinMuzatko May 4, 2016

Member

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/

Member

MartinMuzatko commented May 4, 2016

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

This comment has been minimized.

Show comment
Hide comment
@f1ana

f1ana 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.

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

This comment has been minimized.

Show comment
Hide comment
@GianlucaGuarini

GianlucaGuarini May 5, 2016

Member

@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.

Member

GianlucaGuarini commented May 5, 2016

@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