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?

Does the information here (http://stackoverflow.com/questions/22824828/binding-jqueryui-datepicker-within-a-polymer-web-component) help? — Scott Miles, Apr 06 '14 at 01:37
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](http://jsbin.com/cazahupo/6). — ivelander, Apr 06 '14 at 19:53

score 0 · Accepted Answer · edited May 23 '17 at 12:28

0

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.

edited May 23 '17 at 12:28

Community

1
1

answered May 01 '14 at 14:02

ivelander

186
1
1
8

score 0 · Answer 2 · answered Nov 02 '14 at 17:03

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.

Polymer select2 element

2 Answers2

Linked