Strange JavaScript error when using @Push

Flow
1

I am trying to modify components in my UI through a background Thread. Sometimes it works, but sometimes not and a JavaScript Error Notification shows up (see attachment).

I am using the UI.getCurrent().access() whenever my background Thread wants to modify the UI. I have annotated my MainView with @Push(PushMode.MANUAL). The first thing I do in the new Thread is set the ui and session (UI.setCurrent(ui); VaadinSession.setCurrent(session);). Also I invoke UI.getCurrent().push() manually each time I use UI.getCurrent().access()

In the attached screenshot of the javascript error, I can see mentions of import-step-active, which is a class name that I add/remove to/from a Label whithin a ui.access() block:

UI.getCurrent().access(() -> {
	progressBar.setValue(progress);

	for (Label stepLabel : stepLabels) {
		stepLabel.removeClassName("import-step-active");
	}
	stepLabels.get(step -1).addClassName("import-step-active");
	UI.getCurrent().push();
});

The exact same thing was already done in the Vaadin8 version of the same application, where it worked without problems.

Am I doing something wrong, or is this a bug?
And as a side question: Is there a way to disable these JS error Notifications? because sometimes they fill the whole screen and only go away if I click on them but it also refreshes the page which is not something I want to do.

Edit: Using Automatic PushMode (and commenting out the lines UI.getCurrent().push();) does not help, The problem stays the same.
17503070.png

2

Hi =)
Are you using the navigation events?

3

There is 1 usage of UI.getCurrent().navigate(UI.getCurrent().getRouter().getUrl(MyDetailView.class, detailItemId)); in my project, but the background Thread is not related in any way with this line of code.

4

So you are navigating (in a complicated way because I think UI.getCurrent().navigate(UMyDetailView.class, detailItemId); is enough). Since you are navigating, your MyDetailsView.class could implement the AfterNavigationObserver and do your UI.getCurrent().push(); in the afterNavigation()

5

As I said, my background Thread that does the pushes to the UI does not navigate anywhere, I stay in the same view the whole time while the background thread runs. I highly doubt that my issue has to do with navigation. To confirm this I now removed this only usage of navigation and the psuh error still happens.
And as for the ‘complicated’ way of navigating; I only do what is described in the [docs]
(https://vaadin.com/docs/v12/flow/routing/tutorial-routing-url-generation.html). Both ways work, let’s leave it at that.

6

Ok sorry =)

I had the same issues with the push. I solved it by placing the @Push in the routerLayout. Maybe this can help

7

I am facing the same issue in a ContextMenu.
I have a MenuItem in a SubMenu, which contains a HorizontalLayout.
When the MenuItem is clicked, I toggle (add or remove) a CSS-Class from the HorizontalLayout.
The call of removeClassName causes an error (TypeError) : Cannot read property 'a' of undefined, as soon as I open the ContextMenu. This is probably because the changes caused by removeClassName will only be sent to the client as soon as the ContextMenu is opened.
I found two workarounds, that are working for me:

  • Wrap the HorizontalLayout in another container. The error only seems to occur, when the class is removed from the direct child of the menu item.
  • Use getStyle().set and getStyle().remove, this works in my case as I only controlled a single property with the CSS-Class.