My use case is fairly simple. I have a list of products and a filter POST form. Whenever a user triggers form submit I receive a stream response that updates the product list and current page URL to something shareable. Filter form itself is contained in a <turbo-frame> if that matters.
My goal is to update the page URL every time user makes changes to a filter form while letting them go back in history and "unapply" filters by simply pressing the Back button in a browser.
Here is my custom stream action:
Turbo.StreamActions.my_push_state = function () {
const url = this.getAttribute("url");
history.pushState(history.state, "", url);
Turbo.navigator.history.push(url);
console.log("my_push_state", url);
};And here is the stream response from the server after the filter form is submitted:
<turbo-stream action="replace"><template>...list of products</template></turbo-stream>
<turbo-stream
action="my_push_state"
url="http://localhost:3000/?foo=bar"
></turbo-stream>
I cannot make it work. When the Back button is pressed the following error appears in a console:
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at ProgressBar.uninstallProgressElement (webpack-internal:///./node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js:1481:38)
at eval (webpack-internal:///./node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js:1455:22)
uninstallProgressElement @ turbo.es2017-esm.js?7ebb:1457
eval @ turbo.es2017-esm.js?7ebb:1431
setTimeout (async)
fadeProgressElement @ turbo.es2017-esm.js?7ebb:1453
hide @ turbo.es2017-esm.js?7ebb:1430
hideVisitProgressBar @ turbo.es2017-esm.js?7ebb:2070
visitRequestFinished @ turbo.es2017-esm.js?7ebb:2050
finishRequest @ turbo.es2017-esm.js?7ebb:1795
requestFinished @ turbo.es2017-esm.js?7ebb:1920
perform @ turbo.es2017-esm.js?7ebb:529
await in perform (async)
issueRequest @ turbo.es2017-esm.js?7ebb:1767
visitStarted @ turbo.es2017-esm.js?7ebb:2018
start @ turbo.es2017-esm.js?7ebb:1722
startVisit @ turbo.es2017-esm.js?7ebb:2283
historyPoppedToLocationWithRestorationIdentifier @ turbo.es2017-esm.js?7ebb:2931
History.onPopState @ turbo.es2017-esm.js?7ebb:2200
My use case is fairly simple. I have a list of products and a filter POST form. Whenever a user triggers form submit I receive a stream response that updates the product list and current page URL to something shareable. Filter form itself is contained in a
<turbo-frame>if that matters.My goal is to update the page URL every time user makes changes to a filter form while letting them go back in history and "unapply" filters by simply pressing the
Backbutton in a browser.Here is my custom stream action:
And here is the stream response from the server after the filter form is submitted:
I cannot make it work. When the
Backbutton is pressed the following error appears in a console: