Focus unexpectedly shifts to the question’s Name property editor when navigating backward fix #7547 (#7563)

* Focus unexpectedly shifts to the question’s Name property editor when navigating backward fix #7547

* Enhance property grid behavior to maintain panel focus during question changes

* Fix e2e test

Author: andrewtelnov

e2e/property-grid/panels.spec.ts

@@ -8,7 +8,7 @@ test.describe(title, () => {
     await page.setViewportSize({ width: 1920, height: 1080 });
   });
 
-  test("Panel stay focused on question change", async ({ page }) => {
+  test("Panel stay visible on question change", async ({ page }) => {
     const json = {
       "pages": [
         {
@@ -44,7 +44,7 @@ test.describe(title, () => {
     await expect(startWithNewLine).toBeVisible();
     await page.locator("div [data-name=\"minWidth\"] input").click();
     await question1.click();
-    await expect(page.locator("div [data-name=\"minWidth\"] input")).toBeFocused();
+    await expect(page.locator("div [data-name=\"minWidth\"] input")).toBeVisible();
   });
 
   test("Show/hide panel header on entering/deleting the panel title, Bug#5720", async ({ page }) => {

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

@@ -3661,7 +3661,7 @@ export class SurveyCreatorModel extends Base
       }
       if (!!propertyName) {
         this.sidebar.executeOnExpand(() => {
-          this.designerPropertyGrid.selectProperty(propertyName, focus || !this.selectFromStringEditor);
+          this.designerPropertyGrid.selectProperty(propertyName, focus && !this.selectFromStringEditor);
         });
       }
       this.expandCategoryIfNeeded();

packages/survey-creator-core/src/property-grid/index.ts

@@ -853,17 +853,29 @@ export class PropertyGridModel {
       this.updateCurrentSurveyWithNewDefinition();
     }
   }
+  private expandPanel(panel: PanelModel): void {
+    panel.blockAnimations();
+    panel.expand();
+    panel.releaseAnimations();
+  }
   public selectProperty(propertyName: string, focus = true) {
     if (!this.survey) return;
     var question = this.survey.getQuestionByName(propertyName);
-    if (!question) return;
+    if (!question) {
+      if (this.currentlySelectedPanel) {
+        const panelName = this.currentlySelectedPanel.name;
+        const panel = <PanelModel>this.survey.getPanelByName(panelName);
+        if (panel) {
+          this.expandPanel(panel);
+        }
+      }
+      return;
+    }
     var panels = this.survey.getAllPanels();
     for (var i = 0; i < panels.length; i++) {
       var panel = <PanelModel>panels[i];
       if (panel === question.parent) {
-        panel.blockAnimations();
-        panel.expand();
-        panel.releaseAnimations();
+        this.expandPanel(panel);
       } else {
         panel.collapse();
       }
@@ -1153,9 +1165,7 @@ export class PropertyGridModel {
     if (!!expandedTabName && !this.getPropertyGridExpandedCategory()) {
       const panel = <PanelModel>this.survey.getPanelByName(expandedTabName);
       if (!!panel) {
-        panel.blockAnimations();
-        panel.expand();
-        panel.releaseAnimations();
+        this.expandPanel(panel);
       }
     }
   }

packages/survey-creator-core/tests/creator-base-v1.tests.ts

@@ -1251,6 +1251,48 @@ test("getDisplayText https://surveyjs.answerdesk.io/ticket/details/T1380", () =>
   const model = new PageNavigatorViewModel(new PagesController(creator), "");
   expect(model.items[0].title).toEqual("Page 1");
 });
+test("selectFromStringEditor should prevent focus on property editor", () => {
+  const creator = new CreatorTester();
+  creator.JSON = { elements: [{ type: "text", name: "q1" }, { type: "text", name: "q2" }] };
+  const q1 = creator.survey.getQuestionByName("q1");
+  const q2 = creator.survey.getQuestionByName("q2");
+  creator.selectElement(q1);
+  const propertyGrid = creator["designerPropertyGrid"];
+  const log: { propertyName: string, focus: boolean }[] = [];
+  const originalSelectProperty = propertyGrid.selectProperty.bind(propertyGrid);
+  propertyGrid.selectProperty = (propertyName: string, focus: boolean) => {
+    log.push({ propertyName, focus });
+    originalSelectProperty(propertyName, focus);
+  };
+
+  // Select q2 with propertyName "title" and selectFromStringEditor = false => should focus
+  creator.selectFromStringEditor = false;
+  creator.selectElement(q2, "title");
+  expect(log.length).toBe(1);
+  expect(log[0].propertyName).toBe("title");
+  expect(log[0].focus).toBe(true);
+  log.length = 0;
+
+  // Select q1 with propertyName "title" and selectFromStringEditor = true => should NOT focus
+  creator.selectFromStringEditor = true;
+  creator.selectElement(q1, "title");
+  expect(log.length).toBe(1);
+  expect(log[0].propertyName).toBe("title");
+  expect(log[0].focus).toBe(false);
+  log.length = 0;
+
+  // Verify selectFromStringEditor is reset to false after selectionChanged
+  expect(creator.selectFromStringEditor).toBe(false);
+
+  // Select q2 with propertyName "title" and selectFromStringEditor = true, focus = false => should NOT focus
+  creator.selectFromStringEditor = true;
+  creator.selectElement(q2, "title", false);
+  expect(log.length).toBe(1);
+  expect(log[0].propertyName).toBe("title");
+  expect(log[0].focus).toBe(false);
+
+  propertyGrid.selectProperty = originalSelectProperty;
+});
 test(
   "creator getMenuItems should respect property visibility (e.g. for image question) - https://github.com/surveyjs/survey-creator/issues/897",
   () => {

packages/survey-creator-core/tests/property-grid/property-grid-viewmodel.tests.ts

@@ -195,6 +195,63 @@ test("Create the property grid survey on request", () => {
   expect(model.survey).toBeTruthy();
 });
 
+test("Panel stay focused on question change - Bug#7547", () => {
+  const creator = new CreatorTester();
+  creator.propertyGridNavigationMode = "accordion";
+  creator.JSON = {
+    pages: [
+      {
+        name: "page1",
+        elements: [
+          {
+            type: "checkbox",
+            name: "question1",
+            title: "question1",
+            choices: ["Item 1", "Item 2", "Item 3"]
+          },
+          {
+            type: "checkbox",
+            name: "question2",
+            title: "question2",
+            choices: ["Item 1", "Item 2", "Item 3"]
+          }
+        ]
+      }
+    ]
+  };
+
+  const question1 = creator.survey.getQuestionByName("question1");
+  const question2 = creator.survey.getQuestionByName("question2");
+  const propertyGrid = creator["designerPropertyGrid"];
+
+  // Select question1 and open the Layout category
+  creator.selectElement(question1);
+  propertyGrid.selectProperty("startWithNewLine", true);
+  const layoutPanel = <PanelModel>propertyGrid.survey.getPanelByName("layout");
+  expect(layoutPanel.isExpanded).toBeTruthy();
+
+  // Select question2 - Layout should stay expanded
+  propertyGrid.currentlySelectedProperty = "startWithNewLine";
+  creator.selectElement(question2);
+  const layoutPanel2 = <PanelModel>propertyGrid.survey.getPanelByName("layout");
+  expect(layoutPanel2.isExpanded).toBeTruthy();
+
+  // Focus on width property in the Layout panel (simulates clicking an input in the Layout category)
+  // In the real app, focusing a sub-property like "minWidth" sets currentlySelectedProperty to "minWidth"
+  // which doesn't exist as a top-level question in the property grid.
+  // onFocusInQuestion also sets currentlySelectedPanel to the Layout panel.
+  // The property grid should still preserve the expanded category (Layout) when switching elements.
+  propertyGrid.currentlySelectedProperty = "minWidth";
+  propertyGrid.currentlySelectedPanel = <PanelModel>propertyGrid.survey.getPanelByName("layout");
+
+  // Switch back to question1 - Layout should remain expanded
+  creator.selectElement(question1);
+  const layoutPanel1 = <PanelModel>propertyGrid.survey.getPanelByName("layout");
+  const generalPanel1 = <PanelModel>propertyGrid.survey.getPanelByName("general");
+  expect(layoutPanel1.isExpanded).toBeTruthy();
+  expect(generalPanel1.isExpanded).toBeFalsy();
+});
+
 test("Object selector's title should be leaved unchanged when changing question's name - Bug#6699", () => {
   const creator = new CreatorTester();
   creator.JSON = {