Conflicts with the rails jquery-ujs library and semantic dropdown

[nathanpalmer]

Just tested out Semantic-UI tonight and my "Sign Out" link wasn't working. It comes down to this line which stops propagation of the events which means jquery-ujs is unable to catch and send the data-method="delete" properly.

https://github.com/jlukic/Semantic-UI/blob/master/src/modules/dropdown.js#L176

Essentially the link looks like this

<a class="item" data-method="delete" href="/users/sign_out" rel="nofollow">Sign Out</a>

jquery-ujs needs to intercept the click to handle it properly. But that is not happening unless I comment out the stopPropogation line.

https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L292

[jlukic]

Ah

rails is using $document.delegate() for event delegation so the actual event has to bubble up to document before it fires. If it was directly bound to the element it would work a-ok which was the expected use-case.

The reason items prevent bubbling is for nested menus

<div class="menu">
    <div class="item">
      <i class="dropdown icon"></i>
      Dogs
      <div class="menu">
        <div class="active item">Shiba Inu</div>
        <div class="item">Poodle</div>
        <div class="item">Labrador</div>
      </div>
    </div>
    <div class="item">
      <i class="dropdown icon"></i>
      Cats
      <div class="menu">
        <div class="item">Aegean</div>
        <div class="item">Balinese</div>
        <div class="item">Persian</div>
      </div>
    </div>
  </div>

With nested menus any click on a sub-element like Shiba Inu will bubble up and fire events attached to the parent item dog unless propagation is deterred.

I'll see if there's another way without blocking bubbling to do this.

[jlukic]

Actually this is not a problem, items with menus aren't able to be selected yet anyway.

[nathanpalmer]

Thanks!