Problem with Vaadin 8 and Navigation with IE11

Hi,

i’m having a problem with Vaadin 8.0.6 and navigation. In my application, there are links and buttons, which the user might click to navigate through my application. The link contains an url and the button has a click handler, setting an uri fragment. Both controls are navigating to different views and are always visible.

Using IE11 (11.0.9600.16428 RTM) the navigation fails under specific circumstances. When I click the link in the browser, the browser displays a view. Then I click the button and the other view is displayed. Clicking the link again, the browser displays the url of the first view, but it gets never displayed. I did not receive an url change in the application, by using the PopStateListener nor the UriFragmentChangeHandler. Even the VaadinServlet.service method is not called.

Using Chrome 58.0.3029.110 or Firefox 54.0, my application works like a charm. Vaadin 8.0.5 had the same problem, Vaadin 7.7.7 worked. Switching from setting the uri fragment to using the Navigator for navigating the views, did not change the behavior.

What am I doing wrong? Any hints are appreciated.

I have reproduced the problem, by creating a Vaadin project in eclipse and changing the UI class. The code for the UI class is attached.

Volker.
33701.java (2.45 KB)

Try navigating with CDI, using @CDIView annotations and Injecting the @CDIViewProvider like in this example: https://github.com/vaadin/cdi-tutorial

Let the server navigate for you. I use Wildfly.

Notice that it doesn’t use a VaadinServlet.

I’ll wait patiently your response.

Hi Fernando,

at first, thanks for your reply. I may have described the problem not good enough. The cdi-tutorial has only buttons and no html links, which seem to show a bug in my code or vaadins code. I’ll try to describe my problem more clearly, by inserting code in the ChatView.buildUserSelectionLayout method, like this:

<—cut here—>

layout.addComponent(generateUserSelectionButton(user));
layout.addComponent(new Link(user.getName(), new ExternalResource(“http://localhost:8080/cdi.tutorial-0.0.1-SNAPSHOT/#!chat/” + user.getUsername())));

<—cut here—>

The link does the same as the button, it refers to a chat with the specified user. It is working, except for the following scenario. When running the application, login as admin, click the “Some User” button, click the back button, to get back to the user selection, and now click the “Some User” link. The link is not working anymore in IE 11.

Seems to me, that when changing views in IE 11, by firing NavigationEvents, the browser does not recognize the url change. When clicking a link to a view with some Url1 and then firing a NavigationEvent to another Url2, the browser thinks he still displays the view of Url1. A link to Url1 in the Url2 view is not working, using IE11. There are no problems with Chrome and Firefox.

To solve the problem, i may avoid using links, but in some circumstances i want the user to be able to right-click a link and open the link in a new window.

Regards, Volker.

I’ve digged a little deeper, examining the vaadin framework source code, and found this commit: https://github.com/vaadin/framework/commit/62c44dd77e47c908361a87332182f2e2465972c0#diff-c9671120424bf25a674475b8cd3c3601. The changes in the UIConnector lead me to a known bug in the ie11 (see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/ and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/), which will not be fixed by microsoft. In the commit, mentioned above, there seems to be a workaround using an ValueChangeHandler in the History class. I assume, this workaround is not working. Can anyone confirm this?

The workaround is definitely not working in my scenario. I added console log output in the popstate and the valuechangehandler (see commit: https://github.com/vaadin/framework/commit/62c44dd77e47c908361a87332182f2e2465972c0#diff-c9671120424bf25a674475b8cd3c3601 UIConnector.java init-Method). When browsing through an application, the popstate handler never gets called in ie11. The valuechangehandler is getting fired, if i enter an url or by clicking an anchor, only if the url differs from the last entered url. It doesn’t matter what uri fragments are set respectively what states are pushed in between.

It seems, that ie11 does not recognize url changes by setting an uri fragment respectively pushing a state, even if the new url is displayed as the current url. Entering url a, then push state b, c, d, etc. and again entering url a, the valuechangehandler nor the popstatelistener is getting called.

Hi.

I’ve already created an issue in github: https://github.com/vaadin/framework/issues/9567

Fragments have the advantage of the ability to use html a-tags, in order to navigate through our application without having a full page rebuild.

Thanks, Volker.

Hi,

I was able to reproduce the issue with Volker’s UI. You could create an issue about it to github.

But I’d suggest to stop using fragments in url’s alltogether. You can now replace the actual URL part with pushState method and create proper deep linking.

cheers,
matti

Hi,

You could use
“link” style in Button
and then just assign a new url.

Alternatively you could build this kind of component that exists for History Add-on (for V7):
https://github.com/wolfie/HistoryExtension/blob/master/src/main/java/com/github/wolfie/history/PushStateLink.java

That looks like a link for search engines, but just changes just the fragment instead of doing a full page reload.

cheers,
matti