From 34cd2104d2ceb4ac256385e2eee9b5737166f693 Mon Sep 17 00:00:00 2001 From: Ivan Starkov Date: Fri, 27 Sep 2024 21:14:01 +0300 Subject: [PATCH] fix: canvas autoscroll issue when selecting instances (#4174) ## Description closes #4169 ## Steps for reproduction Shoud be tested well as having various scroll/resize/mutation obserevers we have, everything can cause infinite cycle ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file --- apps/builder/app/canvas/collapsed.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/builder/app/canvas/collapsed.ts b/apps/builder/app/canvas/collapsed.ts index dfef70c539..ff738fd61a 100644 --- a/apps/builder/app/canvas/collapsed.ts +++ b/apps/builder/app/canvas/collapsed.ts @@ -179,6 +179,12 @@ const recalculate = () => { } } + // If most elements are collapsed at the next step, scrollHeight becomes equal to clientHeight, + // which resets the scroll position. To prevent this, we set the document's height to the current scrollHeight + // to preserve the scroll position. + const preserveHeight = document.documentElement.style.height; + document.documentElement.style.height = `${document.documentElement.scrollHeight}px`; + // Now combine all operations in batches. // 1. Remove all collapsed attributes @@ -222,6 +228,8 @@ const recalculate = () => { for (const [element, value] of collapsedElements.entries()) { element.setAttribute(collapsedAttribute, value); } + + document.documentElement.style.height = preserveHeight; }; /**