widget api problems

[Leon74]

When a polymer component is used on a panel, using it again in another Composite panel results in weird behavior.
It seems like once a polymer component is 'mixed in' on a different Panel, newly instantiated components not yet attached to the dom (on Composite.initWidget(uiBinder.createAndBindUi(this))) don't get mixed in again.

Example is visible in de demo;
When you goto GWT integration - 'uibinder widgets' it behaves correct and all paper-tabs are in the tabsContent div.
Then reload the demo page, and go to 'uibinder elements' first - be sure NOT to instantiate the 'uibinder widgets' first. If you then go to 'uibinder widgets' you see that the underline thing in the tabs is not working and that the dynamically created paper-tab is added directly under the paper-tabs tag and is no more in the tabsContent div

goto this url:
https://vaadin.github.io/gwt-polymer-elements/demo/#gwt/UiBinderElement
then click on 'UiBinder Widgets' and the problem manifests itself.

using PaperDropdownMenu as the component this way will result in exceptions with 'Cannot find element with id "gwt-uid-386"'

I'm working on a production app with 1.1.3.0-alpha1 where I have this problem, would be nice if this could be fixed asap

[Leon74]

The first time a type is used, say TabPanel, it seems like this mix-ins occur when rendered or when added to the dom.
The second time (for instance clicking a button and instantiating a new page) the same type is used as a Widget, it seems the mix-ins are applied at instantiation of the type. So every other widget added after instantiation does not get enriched by the mix-ins.

When this is done with a PaperDropDownMenu - the mix-ins try and locate a div by id through the dom. But since the PaperDropDownMenu just got instatiated, it is not attached yet and an exception is thrown.

I'm hacking my way around this in that I made a single page with all PaperDropDownMenu's I need and cannibalizing them for the pages I need to show them.
However, this bug directly means that the widget API is NOT usable for any application bigger than a mickey-mouse application.
Please fix this asap!!

[cpboyd]

I've also noticed these issues with PaperDropdownMenu.

However, I'm not sure the issue is solely related to mix-ins.

It seems that the entire element isn't seen, because I've worked-around this by making the "dropdown-content" a regular HTML tag.

It then ends up that the @UiField (of the PaperDropdownMenu) appears to be null, though...

[ghost]

The problem with dynamically created items is that if you add a child widget (e.g. PaperTab) to its parent (e.g. PaperTabs) the internal items array will not be updated, therefore the tab is not selectable.
In chrome you can inspect the items array in the property section of the tabs element.

Proper way to add items dynamically:

PaperTab tab = new PaperTab("dynamically created item");
tabs.add(tab); // Add child to widget
tabs.getItems().push(tab.getElement()); // Add to items array

[Leon74]

It works perfectly the first time when loaded;
Check:
https://vaadin.github.io/gwt-polymer-elements/demo/#gwt/UiBinderWidget - then it works like a charm - also the elements in the DOM are exactly where they need to be.
Then click Ui Binder Elements and refresh the page so the app is reloaded on the elements.
Then go back to UiBinder Widget and you see that the location of the dynamically added PaperTab in the dom is completely wrong.

[eghazisaeedi]

I have a similar problem. I create a widget that has panel and tabs. In tabs there is a button that I want to change the whole page to a SecondWidget if its clicked on. So, in the click event I do:

RootPanel.get().clear();
RootPanel.get().add(new SecondWidget());

But, in chrome when I click the button, second widget behaves wired, and tabs are not selectable. However, it works fine in Safari.

Do you have any idea?