remi: onclick should not always have `event.preventDefault()`

When adding an onclick listener to a widget, it adds the following onclick attributes to the html object:

sendCallback('XXXXXXXX','onclick');event.stopPropagation();event.preventDefault();

The event.preventDefault() part causes issues if you put any widget with a “default” action like a checkbox or a link inside a container which has an onclick listener. The default action will be stopped at the parent and the checkbox, link, etc won’t work.

I can understand why the event.preventDefault() makes sense. If you add an onclick listener directly on a link, checkbox, etc, you probably want it to replace its default action. It would however be nice to have the option to skip it when adding onclick listeners to containers.

My example use case

I have created a Modal widget which consists of a backdrop, a modal and a content (code can be found here).

The backdrop has an onclick listener to close the modal on click.

The modal has a dummy onclick listener which does nothing but stopping the event propagation (otherwise clicking on the modal would trigger the backdrop listener).

The content has a form with inputs and links. The checkboxes and links don’t work since the parents (both modal and backdrop) have event.preventDefault() in their onclick attribute.

A temporary hack that I found to overcome this issue is to re-implement checkbox functionality in an onclick listener:

checkbox.onclick.do(lambda w: checkbox.set_value(not checkbox.get_value()))

but this is not very practical.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 25 (14 by maintainers)

Commits related to this issue

Most upvoted comments

The .attributes is missing, this was probably a typo. You should use:

dl.attributes[Widget.EVENT_ONCLICK] = "event.stopPropagation()"

I can of course reconsider it. I don’t exactly remember the motivation behind that decision.

I tried to remove preventDefault at all, and I can’t see problems. Tested with some remi examples and with the Graphical Editor.