IE11 reload all application when I click on link

[zvitek]

Hello, I found that when I click on link , application make a classic request on a new route and load all application again in IE11. When I push a new route, it's ok. It's problem in IE11 or I made something wrong?

This make a reload all page in IE11 <a href="/setting/notification">Setting</a>

This is ok window.history.pushState({}, null, url); window.dispatchEvent(new PopStateEvent('popstate'));

[vlukashov]

The behavior you describe looks like a bug. Vaadin Router currently has a full support for IE11, and should intercept and handle clicks on a link like <a href="/setting/notification">Setting</a>.

Could you please create a mininal demo case that shows the issue? There is a handy starting template for that available here: https://glitch.com/edit/#!/vaadin-router?path=script.js:1:0

[zvitek]

Hello, I prepared a function demo with my logic of application. I can not it test in IE11 because a lot of things in IE does not work. Maybe it's help you.

I tried to upgrade on the newest version 1.5.2 but there is a same problem.

https://glitch.com/edit/#!/aerial-spell

[sahilshah50]

Hello, I had the same issue. Clicking certain links on IE11 caused entire application to be reloaded. A full postback to server was issued, rather than being handled by vaadin router. Initial tests showed this issue is prominent when links are dynamically loaded, are within submenu (opening on mouse hover) or encapsulate other elements (like an image) and the click on child is bubbled up to parent tag.

Upon further debugging, I found that IE11 sometimes doesn't provide any port, protocol, hostname or host properties to the anchor element. Also, it converts the relative URLs to corresponding absolute ones. As a result the getAnchorOrigin(anchor) function in click.js fails to return the correct origin, resulting in vaadin assuming origin mismatch and ignores to handle the click, thereby a full page request is issued by the browser.

Luckily the fix was simple because I was already using a custom click handler in my code. All one needs is to patch the getAnchorOrigin(anchor) function to correctly fetch origin from href in case anchor element doesn't provide required port/protocol/host/hostname properties.

function getAnchorOrigin(anchor) {
    //IE11: Sometimes doesn't provide any port,protocol,hostname or host 
    //It also converts relative href to absolute
    //In that case use href to fetch origin info
    if (anchor.port == "" && anchor.protocol == "" && anchor.hostname == "" && 
        anchor.host == "" && anchor.href.indexOf("http") == 0) {
        var pathArray = anchor.href.split('/');
        return pathArray[0] + '//' + pathArray[2];
    }
    // IE11: on HTTP and HTTPS the default port is not included into
    // window.location.origin, so won't include it here either.
    const port = anchor.port;
    const protocol = anchor.protocol;
    const defaultHttp = protocol === 'http:' && port === '80';
    const defaultHttps = protocol === 'https:' && port === '443';
    const host = (defaultHttp || defaultHttps)
        ? anchor.hostname // does not include the port number (e.g. www.example.org)
        : anchor.host; // does include the port number (e.g. www.example.org:80)
    return `${protocol}//${host}`;
}

IE is a nightmare. Hope this workaround helps anyone else facing the problem.