0

I am using this code form:

dom.document.getElementById("contents").addEventListener("click", {
  (e0: dom.Event) => println("Got the click event at top level!")
}, false)

To experiment with event capturing in Reactjs. This works fine for the click event. However, when trying to do the same thing with UIKit events for the nestable component, as below: 

dom.document.getElementById("contents").addEventListener("start.uk.nestable", {
  (e0: dom.Event) => println("Got the start event at top level!")
}, false)

I am not getting anything. The nestable documentation lists four event names and I've tried all of them - but never get any response when manipulating nestables. It is my understanding that without capture the events should be bubbling up to the top level where the listener is attached; but when using devtools to monitor events on the entire document it seems like the nestable events are not fired.

Incorrect event type? Incorrect event name? UiKit swallowing its own events for some reason? Thankful for any help.

Greg
  • 11
  • 3
  • I guess `addEventListener` will listen to only native events https://developer.mozilla.org/en-US/docs/Web/Events. you need to use jquery to list for `start.uk.nestable` something like `$("#contents").on('start.uk.nestable', function(){ println("Got the start event at top level!") });` – sandyJoshi Dec 21 '16 at 08:20
  • I think it can listen to custom events, but I'm not clear on how yet. Jquery does work to do the listener bindings, so that's a start - I think scalajs's implementations are getting tripped up by the event namespacing UIKit uses to work hand-in-hand with Jquery. "[event] DOT [namespace]", etc. – Greg Dec 21 '16 at 20:58
  • Appears to be a Jquery issue at the root, as per this issue thread on the scalajs-react project: https://github.com/japgolly/scalajs-react/issues/294 – Greg Dec 21 '16 at 22:09
  • That being said, my attempt to use the workaround of manually using dispatchEvent doesn't seem to work, so I'm still missing something. – Greg Dec 21 '16 at 22:11

1 Answers1

0

Apparently this is a consequence of UIKit's reliance on using jquery's .trigger() to send its custom events, which cannot normally be listened to except through jquery as per this bug report:

https://bugs.jquery.com/ticket/11047

This being the case I took to manually adding jquery listeners in my page setup and calling back into the Scalajs code through the normal @JSExport method.

Greg
  • 11
  • 3