Vaadin 14: How to update a css style for a component from another thread?

Viewed 224

So I have this issue with Vaadin Flow 14, I have a component that uses both position: static and position: absolute in it's CSS. It also have a cool animation and I needed to use both positions so it doesn't look weird, can take all the screen and can also be scrollable.

It's behavior is the following:

  1. Component start with position: static in its CSS file (can be scrollable)
  2. Click on the component and set position: absolute with the method getStyle().set() and it takes all the window
  3. Close the component and it goes back to position: static so it can be within it's parent and be scrollable

The problem is in Step 3. I set the position: static by removing the absolute with getStyle().remove(). I'm doing that from another thread so I can remove the style after the animation is done, in that way it doesn't look weird, has the same flow as when the component was opened and doesn't have that jump cut in it.

The style is removed from the component, however it isn't updated instantly and the component can't be scrolled because it's position is still absolute. However if I click on a link to go to another new tab and go back to the main tab it is now updated and the component is in a static position.

I tried to resolve this by adding @Push on my main class but is doesn't work because I have views inside views and this is a custom component from one of the nested views and it isn't in the main class. I have to be able to update it from the component itself just the way I'm removing the style. I just want the component to wait until the animation is played and THEN remove it's position and this is the only way I could find, any other attempts didn't wait for the animation to be played and just updated itself instantly.

This is the thread code I used to remove the style.

new Thread(() -> {
            try {
                Thread.sleep(500);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            this.getUI().get().access(() -> {
                getContent().getStyle().remove("position");
            });
        }).start();
1 Answers

Solved!

Taking the current UI in an instance and manually setting the push configuration for it.

UI currentUI = UI.getCurrent();
currentUI.getPushConfiguration().setPushMode(PushMode.MANUAL);

And adding this at the end of the code in the thread:

currentUI.push();

Works just exactly like it's supposed to.

Related