QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-30 15:59:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(savings_goals): projection chart redraws when container resizes (Turbo navigation)

Browse Source 
After submitting a new contribution, Turbo's redirect-replace stream
swaps the page; the chart's data-controller reconnects but the
container's clientWidth can momentarily be 0 (parent grid hasn't laid
out yet). The early-bail in _draw left the SVG empty and nothing
triggered another draw, so the chart stayed blank.

Add a ResizeObserver to the controller. The observer fires once the
container settles into a real size and re-runs _draw, which now paints
the chart correctly after the post-submit navigation.
This commit is contained in:
Guillem Arias
2026-05-11 17:05:54 +02:00
parent 03b5126c8a
commit 8d8049434e
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/controllers/savings_goal_projection_chart_controller.js
View File

@@ -17,10 +17,18 @@ export default class extends Controller {
this._draw();
this._resize = this._draw.bind(this);
window.addEventListener("resize", this._resize);
// Container may have 0 width on initial connect (Turbo restoration,
// hidden parent, etc). Re-draw whenever the box settles into a real
// size.
if (typeof ResizeObserver !== "undefined") {
this._observer = new ResizeObserver(() => this._draw());
this._observer.observe(this.element);
}
}
disconnect() {
window.removeEventListener("resize", this._resize);
this._observer?.disconnect();
}
_draw() {