diff --git a/js/src/forum/states/GlobalSearchState.js b/js/src/forum/states/GlobalSearchState.js index 7ef515bf0..e45bf729c 100644 --- a/js/src/forum/states/GlobalSearchState.js +++ b/js/src/forum/states/GlobalSearchState.js @@ -1,3 +1,4 @@ +import setRouteWithForcedRefresh from '../utils/setRouteWithForcedRefresh'; import SearchState from './SearchState'; export default class GlobalSearchState extends SearchState { @@ -66,7 +67,7 @@ export default class GlobalSearchState extends SearchState { params.sort = sort; } - m.route.set(app.route(this.searchRoute, params), null, { state: { key: Date.now() } }); + setRouteWithForcedRefresh(app.route(this.searchRoute, params)); } /** @@ -90,6 +91,6 @@ export default class GlobalSearchState extends SearchState { const params = this.params(); delete params.q; - m.route.set(app.route(this.searchRoute, params), null, { state: { key: Date.now() } }); + setRouteWithForcedRefresh(app.route(this.searchRoute, params)); } } diff --git a/js/src/forum/utils/History.js b/js/src/forum/utils/History.js index 8703128e3..197a34cac 100644 --- a/js/src/forum/utils/History.js +++ b/js/src/forum/utils/History.js @@ -1,3 +1,5 @@ +import setRouteWithForcedRefresh from './setRouteWithForcedRefresh'; + /** * The `History` class keeps track and manages a stack of routes that the user * has navigated to in their session. @@ -114,6 +116,6 @@ export default class History { home() { this.stack.splice(0); - m.route.set('/', null, { state: { key: Date.now() } }); + setRouteWithForcedRefresh('/'); } } diff --git a/js/src/forum/utils/setRouteWithForcedRefresh.ts b/js/src/forum/utils/setRouteWithForcedRefresh.ts new file mode 100644 index 000000000..d2d9fb686 --- /dev/null +++ b/js/src/forum/utils/setRouteWithForcedRefresh.ts @@ -0,0 +1,15 @@ +import Mithril from 'mithril'; + +/** + * Mithril 2 does not completely rerender the page if a route change leads to the same route + * (or the same component handling a different route). This util calls m.route.set, forcing a reonit. + * + * @see https://mithril.js.org/route.html#key-parameter + */ +export default function setRouteWithForcedRefresh(route: string, params = null, options: Mithril.RouteOptions = {}) { + const newOptions = { ...options }; + newOptions.state = newOptions.state || {}; + newOptions.state.key = Date.now(); + + m.route.set(route, params, newOptions); +}