diff --git a/functionalTests/property-grid/survey.ts b/functionalTests/property-grid/survey.ts index 31af6ac1de..f7db06b68b 100644 --- a/functionalTests/property-grid/survey.ts +++ b/functionalTests/property-grid/survey.ts @@ -235,4 +235,46 @@ test("tabbed mode", async (t) => { await setJSON(json); await t.hover(Selector(".svc-side-bar .svc-scroll__wrapper").filterVisible()); await t.expect(Selector(".svc-side-bar .svc-scroll__scrollbar").visible).notOk(); -}); \ No newline at end of file +}); + +test("Search correctly scrolls to element", async (t) => { + const json = { + "pages": [ + { + "name": "page1", + "elements": [ + { + "type": "checkbox", + "name": "question1", + "title": "question1", + "choices": [ + "Item 1", + "Item 2", + "Item 3" + ] + } + ] + } + ] + }; + await ClientFunction(() => { + window["creator"].animationEnabled = true; + })(); + await setJSON(json); + await t.resizeWindow(1600, 600); + + const isElementInViewport = ClientFunction(() => { + const getBoundValues = document.querySelector("[data-name=logo] input").getBoundingClientRect(); + + const windowHeight = window.innerHeight; + const windowWidth = window.innerWidth; + + return getBoundValues.bottom > 0 && getBoundValues.right > 0 && getBoundValues.left < (windowWidth || document.documentElement.clientWidth) && getBoundValues.top < (windowHeight || document.documentElement.clientHeight); + }); + + await t + .click(".spg-container_search .svc-search input") + .typeText(".spg-container_search .svc-search input", "log", { paste: true }) + .wait(500) + .expect(isElementInViewport()).ok(); +}); diff --git a/packages/survey-creator-core/src/property-grid/search-manager.ts b/packages/survey-creator-core/src/property-grid/search-manager.ts index 0b01716c83..7601d6242d 100644 --- a/packages/survey-creator-core/src/property-grid/search-manager.ts +++ b/packages/survey-creator-core/src/property-grid/search-manager.ts @@ -14,12 +14,14 @@ export class SearchManagerPropertyGrid extends SearchManager { @property() isVisible: boolean; @property({ defaultValue: [] }) allMatches: Array; + private lastCollapsedElement: IElement; private expandAllParents(element: IElement) { if (!element) return; if ((element).page && (element).survey) { (element).survey.currentPage = (element).page; } if (element.isCollapsed) { + this.lastCollapsedElement = element; (element as any).expand(false); } this.expandAllParents((element).parent); @@ -32,11 +34,13 @@ export class SearchManagerPropertyGrid extends SearchManager { prevMatch?.updateElementCss(true); if (!!this.currentMatch && prevMatch !== this.currentMatch) { this.currentMatch.updateElementCss(true); + const lastCollapsedElement = this.lastCollapsedElement; this.expandAllParents(this.currentMatch); + const newPanelExpanded = this.lastCollapsedElement != lastCollapsedElement; setTimeout(() => { const elementId = this.currentMatch?.id; scrollElementIntoView(elementId); - }, 10); + }, newPanelExpanded ? 400 : 10); } this.updatedMatchCounterText(index); }