PR(2): Property Grid - Element Selector - A clicked element is not immediatelly selected (#6718)

* work for the #6685

* work for the #6685

* work for the #6685

* work for the #6685

* Revert "work for the #6685"

This reverts commit 49c8a53.

Author: dmitry-kurmanov

functionalTests/designer/side-bar.ts

@@ -284,4 +284,55 @@ test("No Focus on open Property grid Mobile", async (t) => {
   await t.expect(Selector(".svc-question__adorner button[title='Open settings']").visible).ok();
   await t.click(Selector(".svc-question__adorner button[title='Open settings']"));
   await t.expect(Selector(".spg-question[data-name=name] input").focused).notOk();
+});
+
+test("Element Selector: Column: Scroll", async (t) => {
+  await t.resizeWindow(1920, 500);
+
+  const json = {
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "matrixdropdown",
+            "name": "question1",
+            "columns": [
+              {
+                "name": "Column 1"
+              },
+              {
+                "name": "Column 2"
+              },
+              {
+                "name": "Column 3"
+              }
+            ],
+            "choices": [
+              1,
+              2,
+              3,
+              4,
+              5
+            ],
+            "rows": [
+              "Row 1",
+              "Row 2"
+            ]
+          }
+        ]
+      }
+    ],
+    "headerView": "advanced"
+  };
+  await setJSON(json);
+
+  const getQuestionTopPosition = await ClientFunction(() => {
+    return Math.round(document.querySelector(".svc-question__content")!.getBoundingClientRect().top);
+  });
+
+  await t
+    .expect(getQuestionTopPosition()).eql(374)
+    .click(Selector("#svd-grid-object-selector")).click(Selector(".svc-list__item").withText("Column 2"))
+    .expect(getQuestionTopPosition()).eql(72);
 });

packages/survey-creator-core/src/creator-base.ts

@@ -2830,7 +2830,7 @@ export class SurveyCreatorModel extends Base
     clearTimeout(this.currentFocusTimeout);
     this.currentFocusTimeout = setTimeout(() => {
       this.currentFocusInterval = setInterval(() => {
-        const el = document.getElementById(selEl.id);
+        let el = this.getHtmlElementForScroll(selEl);
         if (!!selEl && (focus || startEdit && (!selEl.hasTitle || selEl.isPanel))) {
           if (!el || this.rootElement.getAnimations({ subtree: true }).filter((animation => animation.effect.getComputedTiming().activeDuration !== Infinity && (animation.pending || animation.playState !== "finished")))[0]) return;
           clearInterval(this.currentFocusInterval);
@@ -2845,7 +2845,7 @@ export class SurveyCreatorModel extends Base
                 SurveyHelper.scrollIntoViewIfNeeded(el.parentElement ?? el, () => { return scrollIntoViewOptions; }, true);
               }
             }
-            if (!propertyName && el.parentElement) {
+            if (!propertyName && el.parentElement && selEl.getType() !== "matrixdropdowncolumn") {
               let elToFocus: HTMLElement = (typeof (focus) === "string") ? el.parentElement.querySelector(focus) : el.parentElement;
               elToFocus && elToFocus.focus({ preventScroll: true });
             }
@@ -2860,9 +2860,19 @@ export class SurveyCreatorModel extends Base
     }, 100);
   }
 
+  private getHtmlElementForScroll(element: any): HTMLElement {
+    const id = element.getType() === "matrixdropdowncolumn" ? element.colOwner.id : element.id;
+    return document.getElementById(id);
+  }
+
   private getSelectedSurveyElement(): IElement {
     var sel: any = this.selectedElement;
     if (!sel || sel.getType() == "survey") return null;
+
+    if (this.selectedElement.getType() === "matrixdropdowncolumn") {
+      return (<any>this.selectedElement);
+    }
+
     return sel.isInteractiveDesignElement && sel.id ? sel : null;
   }
   private onSelectingElement(val: Base): Base {