From 96e41f59753dda3c15b9d1ff88185bceae74a281 Mon Sep 17 00:00:00 2001 From: LTbinglingfeng Date: Fri, 19 Jun 2026 01:59:18 +0800 Subject: [PATCH] fix(config): jump correctly across horizontally snapped sections Field-search jumps used a single scrollIntoView that fought the full-mode sections' horizontal scroll-snap (scroll-snap-type: x mandatory + scroll-snap-align: start), so jumping from one section to a field in another landed on the wrong place. Switch the snap container to the target section instantly first, then scroll the field vertically with inline:'nearest' on the next frame so it can't re-trigger horizontal snapping. --- src/components/config/VisualConfigEditor.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/config/VisualConfigEditor.tsx b/src/components/config/VisualConfigEditor.tsx index 92a8d02c..a33b81f2 100644 --- a/src/components/config/VisualConfigEditor.tsx +++ b/src/components/config/VisualConfigEditor.tsx @@ -253,8 +253,9 @@ export function VisualConfigEditor({ const el = document.getElementById(configFieldDomId(fieldId)); if (!el) { - // Field not rendered right now (e.g. TLS cert while TLS is disabled) — fall back to section. - sectionRefs.current[sectionId]?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + // Field not rendered right now (e.g. TLS cert while TLS is disabled) — fall back to + // bringing its section into view horizontally. + sectionRefs.current[sectionId]?.scrollIntoView({ block: 'nearest', inline: 'start' }); return; } @@ -270,8 +271,15 @@ export function VisualConfigEditor({ highlightedElRef.current?.classList.remove(styles.fieldHighlightActive); } + // Full-mode sections live in a horizontal scroll-snap container (`scroll-snap-type: x + // mandatory`). A single field-level scrollIntoView() tries to do the horizontal section + // switch AND the vertical field scroll at once, which the snap pulls back / lands wrong. + // So: (1) switch to the target section horizontally and instantly (no smooth → no snap + // fight), then (2) next frame, scroll the field vertically with inline:'nearest' so it + // can't re-trigger horizontal snapping. + sectionRefs.current[sectionId]?.scrollIntoView({ block: 'nearest', inline: 'start' }); requestAnimationFrame(() => { - el.scrollIntoView({ behavior: 'smooth', block: 'center' }); + el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); el.classList.add(styles.fieldHighlightActive); }); highlightedElRef.current = el;