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?

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.

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.