CODEWITHSUNDEEP
web-componentvaadin-flow
Johannes Rabauer
Johannes Rabauer

Reputation: 377

How can i populate a change of a property in a Component in Vaadin Flow?

I have following class for a little visible spinner:

@Tag("granite-spinner")
@NpmPackage(value = "@granite-elements/granite-spinner", version = "3.0.0")
@JsModule("@granite-elements/granite-spinner/granite-spinner.js")
public class BusyComponent extends Component implements HasEnabled {
    @Override
    public void onEnabledStateChanged(boolean enabled) {
        getElement().setProperty("active", enabled);
    }
}

That's called in my MainView:

@Route("")
@PWA(name = "Project Base", shortName = "Project Base")
@Push
public class MainView extends VerticalLayout implements PageConfigurator {
    public MainView() {
        UI currUI = UI.getCurrent();
        final BusyComponent bc = new BusyComponent();
        final Button button = new Button("Click me");
        button.addClickListener(event -> {
            button.setEnabled(false);
            bc.setEnabled(true);
            new Thread(() -> {
                try {
                    Thread.sleep(3000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                currUI.access(() -> {
                    button.setEnabled(true);
                    bc.setEnabled(false);
                });
            }).start();
        });
        add(bc);
        add(button);
    }
}

The button gets disabled the moment i click and enabled after 3s. But the Spinner continues spinning. Somehow the Property change is not updated. Does anybody know why?

Upvotes: 0

Views: 117

Answers (1)

anasmi
anasmi

Reputation: 2652

TLDR; You've done everything right. There is nothing wrong with your code and it seems webcomponent doesn't react to an attribute change

Longer version:

I've tried this web-component outside a Vaadin project and it doesn't work the way you expect it to work, unfortunately. Also, it states in description:

active: boolean | null | undefined If true spinner is shown

(So it doesn't imply separately that the visibility is updated after set once..)

An example here JSFiddle example

Thus, there is nothing wrong with our Vaadin code and active property is removed/added correctly on a button click, if you check in devTools.

It seems that web-component simply doesn't react to the property change after it has been rendered once. If you look in its implementation code, property active is used in render() function only Code in unpkg.

I am not a expert in web-components, so not sure how it should be implemented otherwise,but maybe you could create a bug report to a component's Github repo? Feel free to re-use example JSFiddle, if you want : )

Upvotes: 3

Related Questions