some element transformations by jQuery within @dom annotated method causes exception

[mcku]

Problem:
Some transformations make dom.scala thinks it is inserting the element twice and throws an exception.

The element is here https://gist.github.com/glmars/a597f7c28931a38e2e9b3262279889a9#file-dropdown-initialize-scala-L17

Expected behavior: use the transformed element without a problem.

Exception: https://github.com/ThoughtWorksInc/Binding.scala/blob/v11.3.0/dom/src/main/scala/com/thoughtworks/binding/dom.scala#L106
Exception message is: "Cannot insert SELECT twice!"

Additional notes:
The <select>...</select> was being transformed into a <div>...</div> by jquery on the fly. and perhaps this is causing a singularity.

Here is the code how semantic-ui-dropdown module does the transformation: https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/modules/dropdown.js#L358

The same dropdown with jQuery example works successfully if a div element is used instead, e.g.:

val el = <div class="ui selection dropdown">
  <input type="hidden" name="gender"/>
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="1">Male</div>
    <div class="item" data-value="0">Female</div>
  </div>
</div>

[glmars]

I suppose, Binding.scala isn't cause of this problem.

If I understand correctly, in some cases dropdown() creates a wrapper and makes an original element a child of this wrapper. Does it return this wrapper? If so, you need return this wrapper from your @dom function instead of an original element too.

[Atry]

Cannot insert SELECT twice! is the expected behavior.

When you return el, Binding.scala tries to insert it into the outer element. Unfortunately, it has been a child of the wrapper.

[Atry]

https://github.com/Semantic-Org/Semantic-UI/blob/c26bb1d/src/definitions/modules/dropdown.js#L380

[mcku]

I just remembered this.

For the original problem, returning the wrapper (in this case just the parent) works.

    val x: Element = JQuery(el).dropdown().get(0).get

    // return the wrapper
    x.parentNode