Polymer select2 element

Question

I am attempting to wrap the great select2 jquery widget (https://github.com/ivaynberg/select2) in a Polymer element for easy reuse. I was able to get the select initialized correctly, but am running into issues after initialization. Specifically, when clicking the select to open it a type error is thrown in the select2 script when positioning the pop over. Here is a repo with the failing implementation:

https://github.com/ivelander/x-select2

Has anyone had good success integrating Polymer with this select2 widget or jquery widgets in general? Any suggestions on how I might get this example to work?

Amena

Does the information here (#22825328) help? – Tracery

Scott, it certainly does seem related, but the same overriding of jQuery.contains doesn't seem to be effective here. I threw together a similar JSBin here. – Amena

Have you updated your project with the fixes below? – Elephus

Answer 1

Wrapping jQuery plugins in a Polymer element does not currently reliably work due to jQuery's need to access all nodes in the document running into the boundaries of the shadow DOM. Full explanation here.

Amena

Answer 2

I ran into the same issue. You can create a hack for this by forcing the template into the Light DOM:

Polymer "my-select",

  ready: () ->
    $(@$.el).select2({
      placeholder: "Foo..."
      data: []
    })
    this

  # Override parseDeclaration to force the template into the Light DOM
  parseDeclaration: (elementElement) ->
    @lightFromTemplate(@fetchTemplate(elementElement))

Now select2 will be able to locate the proper offset of the select2 container.

Of course, you have to be careful because if you have anything that belongs in the Shadow DOM (like a stylesheet) in your template, it will now be in the Light DOM.

Argentum