manolo / gwt-polymer-elements

Polymer Web Components for GWT. A collection of Material Design widgets for desktop and mobile.
Apache License 2.0
155 stars 49 forks source link

PaperTextareaElement's setValue and setLabel not working in FF #64

Closed lu2 closed 8 years ago

lu2 commented 8 years ago

Hi guys.

Firefox 41.0.2 vaadin-gwt-polymer-elements 1.1.3.0-alpha1

When I use setValue() and setLabel() on PaperTextareaElement, in Firefox it has no effect - ie the value and title stays the same. Nothing is logged. The widget version (PaperTextarea) works ok. Also the same code works ok in Chrome.

Code snippets:

...
@UiField 
PaperTextareaElement textareaElement;
...
    textareaElement.setValue("testvalue2"); //no effect
    textareaElement.setLabel("testlabel2"); //no effect
...
...
<paper-textarea ui:field="textareaElement"></paper-textarea>
...

Full source code containing both Widgeted and Elemented version of PaperTextArea for comparison: https://github.com/lu2/GwtMavenProj/tree/textarea_ff_setx_bug

manolo commented 8 years ago

That is not a problem on the gwt-polymer-library, but in the asynchronous nature of web components being loaded. When you want to use a component the very first time you have to add some sleep to your code or enclose your code in callback. Your code works to me adding this:

        Polymer.whenReady(o -> {
            textareaElement.setValue("testvalue2");
            textareaElement.setLabel("testlabel2");
            return null;
        });

Once TextArea web component has been loaded, you can use it without waiting for it to load.

lu2 commented 8 years ago

Thanks @manolo, you are right. When I ensure that

textareaElement.setValue("testvalue2");
textareaElement.setLabel("testlabel2");

is not called before the textareaelement initalization, it works correctly.

However if it will be called before initialization, the element will ignore setValue/setLabel even for consecutive calls (like from a button click below):

    @UiField 
    PaperTextarea textareaWidget;
    @UiField 
    PaperTextareaElement textareaElement;
    @UiField
    Button button;

    public Main() {
        widget = uiBinder.createAndBindUi(this);

        textareaWidget.setValue("testvalue");
        textareaWidget.setLabel("testlabel");
        textareaElement.setValue("testvalue2");  //this will break textareaElement.setValue forever in FF
        textareaElement.setLabel("testlabel2");  //this will break textareaElement.setLabel forever in FF

    }

    public Widget getWidget() {
        return widget;
    }

    //I click this button after the page with textareaElement is loaded...
    @UiHandler("button")
      void handleClick(ClickEvent e) {
        textareaElement.setValue("xxxtestvalue2");  // no effect in FF
        textareaElement.setLabel("xxxtestlabel2");  // no effect in FF
      }

Strangely this code works in other browsers.