From 9005919fc2feebe991670ec38dbc0429532057e7 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Thu, 19 Dec 2024 19:43:21 +0300 Subject: [PATCH 1/3] #6286 Property Grid incorrectly scrolls editor into view during search Fixes #6286 --- .../src/property-grid/property-grid-view-model.ts | 1 + .../survey-creator-core/src/property-grid/search-manager.ts | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts index 317f8bcc47..da4862ac11 100644 --- a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts +++ b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts @@ -72,6 +72,7 @@ export class PropertyGridViewModel extends Base { } private onSurveyChanged() { + if (this.creator["animationEnabled"]) this.searchManager.scrollElementToViewTimeout = 400; this.survey = this.propertyGridModel.survey; this.searchManager.setSurvey(this.survey); if (!!this.survey) { 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..0bcc4de0a1 100644 --- a/packages/survey-creator-core/src/property-grid/search-manager.ts +++ b/packages/survey-creator-core/src/property-grid/search-manager.ts @@ -10,6 +10,8 @@ export class SearchManagerPropertyGrid extends SearchManager { protected getFilterStringPlaceholder(): string { return getLocString("ed.propertyGridFilteredTextPlaceholder"); } public get propertyGridNoResultsFound(): string { return getLocString("ed.propertyGridNoResultsFound"); } + public scrollElementToViewTimeout = 10; + @property() survey: SurveyModel; @property() isVisible: boolean; @property({ defaultValue: [] }) allMatches: Array; @@ -36,7 +38,7 @@ export class SearchManagerPropertyGrid extends SearchManager { setTimeout(() => { const elementId = this.currentMatch?.id; scrollElementIntoView(elementId); - }, 10); + }, this.scrollElementToViewTimeout); } this.updatedMatchCounterText(index); } From e00ae228b608a1d3af1604570b74d24df7cec143 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Thu, 19 Dec 2024 21:26:56 +0300 Subject: [PATCH 2/3] increase timeout if new panel expanded --- .../src/property-grid/property-grid-view-model.ts | 1 - .../src/property-grid/search-manager.ts | 8 +++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts index da4862ac11..317f8bcc47 100644 --- a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts +++ b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts @@ -72,7 +72,6 @@ export class PropertyGridViewModel extends Base { } private onSurveyChanged() { - if (this.creator["animationEnabled"]) this.searchManager.scrollElementToViewTimeout = 400; this.survey = this.propertyGridModel.survey; this.searchManager.setSurvey(this.survey); if (!!this.survey) { 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 0bcc4de0a1..7601d6242d 100644 --- a/packages/survey-creator-core/src/property-grid/search-manager.ts +++ b/packages/survey-creator-core/src/property-grid/search-manager.ts @@ -10,18 +10,18 @@ export class SearchManagerPropertyGrid extends SearchManager { protected getFilterStringPlaceholder(): string { return getLocString("ed.propertyGridFilteredTextPlaceholder"); } public get propertyGridNoResultsFound(): string { return getLocString("ed.propertyGridNoResultsFound"); } - public scrollElementToViewTimeout = 10; - @property() survey: SurveyModel; @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); @@ -34,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); - }, this.scrollElementToViewTimeout); + }, newPanelExpanded ? 400 : 10); } this.updatedMatchCounterText(index); } From f901410e038cf3a6f0886044526883d83de00a64 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Fri, 20 Dec 2024 16:27:40 +0300 Subject: [PATCH 3/3] #6243 Fix infinite scaling increase/decrease on fast clicks Fixes #6243 --- functionalTests/property-grid/survey.ts | 44 ++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) 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(); +});