Document Title doesn't change with m.route.set options

[agentx-cgn]

Browsers seem to ignore the pushState/replaceState option title. As consequence pages in the browser's history are indistinguishable. The workaround is to set the title with document.title = 'Your title here'. Mithril should handle this gracefully and automatically.

Discussion: whatwg/html#2174
Solution: https://stackoverflow.com/questions/13955520/page-title-is-not-changed-by-history-pushstate
Version: as of today

[dead-claudia]

Known issue with no intention to fix. This is up to the browsers to implement, not us. It's worth noting that not all browsers ignore it this blatantly.

If anything, I'm tempted to drop support for the title parameter entirely, but that isn't going to happen before v3.

[agentx-cgn]

Well, sure, the specs say: The title is purely advisory. User agents might use the title in the user interface. But, at the moment it is up to the users to implement, which requires a particular architecture. At least an example might be advisable.

[dead-claudia]

@agentx-cgn If you really want a true drop-in workaround, just write a helper like this:

function setRoute(path, params, opts) {
    var prev = document.title
    try {
        if (opts && opts.title) document.title = opts.title
        m.route.set(path, params, opts)
    } finally {
        if (opts && opts.title) document.title = prev
    }
}

That should likely be sufficient for your needs, as browsers I believe should honor that. If that doesn't work (as in document.title isn't captured synchronously - not 100% sure when browsers do capture it), you can do something like this:

function setRoute(path, params, opts) {
    if (opts && opts.title) {
        var prev = document.title
        // This listener is intentionally capturing, so it precedes
        // Mithril's own listener
        window.addEventListener("popstate", function handler() {
            window.removeEventListener("popstate", handler, true)
            document.title = prev
        }, true)
        document.title = opts.title
        try {
            m.route.set(path, params, opts)
        } catch (e) {
            handler()
            throw e
        }
    } else {
        m.route.set(path, params, opts)
    }
}