Skip to content
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
Closed

Update not occurring for looped item and click events #1770

f1ana opened this issue May 3, 2016 · 4 comments

Comments

@f1ana
Copy link

@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
Copy link
Author

@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
Copy link
Contributor

@MartinMuzatko 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
Copy link
Author

@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
Copy link
Member

@GianlucaGuarini 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 mentioned this issue May 9, 2016
14 of 16 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants