Issue/6022 limit area for property grid drop down (#6070)

* #6022 Limit area for property grid drop-down
Fixes #6022

* #6022 revert subitems paddings

* #6022 limit area

* #6022 Limit area for property grid drop-down
Fixes #6022

* #6022 try to fix angular test
Fixes #6022

* #6022 reset getTargetCallback for dropdown action with custom markup
In this case target element is calculated as parent, not previous sibling

functionalTests/designer/surface.ts

@@ -395,4 +395,25 @@ test("Check page adorner state is restored after shrink and stretch", async (t)
   await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).notOk();
   await t.resizeWindow(1920, 1080);
   await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
+});
+test("Popup position", async (t) => {
+  const setCreatorTop = ClientFunction((top) => {
+    const el = document.querySelector(".svc-creator") as HTMLElement;
+    el.style.marginTop = top;
+  });
+  await setCreatorTop("200px");
+
+  await t.resizeWindow(1400, 900);
+  await setJSON({
+    "elements": [
+      {
+        "type": "text",
+        "name": "q1"
+      }
+    ]
+  });
+  await t.click('button[title="Survey settings"]');
+  await t.click('[data-name="locale"]');
+  await t.expect(ClientFunction(() => { return document.querySelector('[data-name="locale"] .sv-popup__container')?.getBoundingClientRect().top; })()).gte(200);
+  await setCreatorTop("");
 });

packages/survey-creator-angular/src/side-bar/side-bar-property-grid-header.component.html

@@ -8,7 +8,7 @@
             <span class="svc-sidebar__header-subtitle">{{model.tooltip}}</span>
           </div>
         </div>
-        <sv-ng-popup [popupModel]="model.popupModel" [getTarget]="getTarget"></sv-ng-popup>
+        <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
       </div>
     </div>
   </div>

packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html

@@ -3,6 +3,6 @@
   <div class="svc-toolbox__item-submenu-button" (mouseover)="viewModel.onMouseOver(item, $event)"
     (mouseleave)="viewModel.onMouseLeave(item, $event)">
     <svg [iconName]="item.subitemsButtonIcon" [size]="'auto'" sv-ng-svg-icon></svg>
-    <sv-ng-popup [popupModel]="model.popupModel" [getArea]="model.getArea"></sv-ng-popup>
+    <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
   </div>
 </ng-template>

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

@@ -2292,6 +2292,10 @@ export class SurveyCreatorModel extends Base
     if (reason === "test" || reason === "theme") {
       this.onPreviewSurveyCreated.fire(this, { survey: survey });
     }
+
+    survey.onPopupVisibleChanged.add((_, options) => {
+      if (!options.popup.getAreaCallback) options.popup.getAreaCallback = () => { return this.rootElement; };
+    });
     return survey;
   }
   private getSurveyInstanceCreatedArea(reason: string): string {
@@ -3745,6 +3749,7 @@ export class SurveyCreatorModel extends Base
       horizontalPosition: "center",
       displayMode: this.isTouch ? "overlay" : "popup"
     });
+    newAction.popupModel.getTargetCallback = undefined;
 
     return newAction;
   }

packages/survey-creator-core/src/custom-questions/question-color.ts

@@ -142,6 +142,7 @@ export class QuestionColorModel extends QuestionTextModel {
     popupModel.displayMode = IsTouch ? "overlay" : "popup";
     popupModel.setWidthByTarget = true;
     popupModel.positionMode = "fixed";
+    popupModel.getTargetCallback = undefined;
     listModel.isItemSelected = (itemValue: ItemValue) => itemValue.value == this.value;
     return action;
   }

packages/survey-creator-core/src/property-grid/property-grid-view-model.ts

@@ -1,4 +1,4 @@
-import { Base, SurveyModel, property, PopupModel, Action, CssClassBuilder } from "survey-core";
+import { Base, SurveyModel, property, PopupModel, Action, CssClassBuilder, getActionDropdownButtonTarget } from "survey-core";
 import { PropertyGridModel } from "./index";
 import { SelectionHistory } from "../selection-history";
 import { SurveyHelper } from "../survey-helper";
@@ -149,6 +149,7 @@ export class PropertyGridViewModel extends Base {
     );
     this.selectorPopupModel.cssClass += " svc-object-selector";
     this.selectorPopupModel.displayMode = this.creator.isTouch ? "overlay" : "popup";
+    this.selectorPopupModel.getTargetCallback = getActionDropdownButtonTarget;
     this.selectorPopupModel.registerPropertyChangedHandlers(["isVisible"], () => {
       if (!this.selectorPopupModel.isVisible) {
         this.objectSelectionAction.pressed = false;

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

@@ -254,6 +254,7 @@ export class QuestionToolboxItem extends Action implements IQuestionToolboxItem
     if (!items || items.length < 1) return;
 
     this.setSubItems({ items: items });
+    this.popupModel.getAreaCallback = this.getArea;
     this.component = QuestionToolbox.defaultItemGroupComponent;
   }
   /**

packages/survey-creator-knockout/src/side-bar/side-bar-property-grid-header.html

@@ -8,7 +8,7 @@
           <span class="svc-sidebar__header-subtitle" data-bind="text: model.tooltip"></span>
         </div>
       </div>
-      <sv-popup params="{ model: model.popupModel, getTarget: $parent.getTarget }"></sv-popup>
+      <sv-popup params="{ model: model.popupModel }"></sv-popup>
     </div>
   </div>
 </div>

packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html

@@ -3,5 +3,5 @@
 <div class="svc-toolbox__item-submenu-button"
   data-bind="event: { mouseover: onMouseOver, mouseleave: onMouseLeave }">
   <!-- ko component: { name: 'sv-svg-icon', params: { iconName: item.subitemsButtonIcon, size: 'auto' } } --><!-- /ko -->
-  <sv-popup params="{ model: $data.item.popupModel, getArea: $data.item.getArea }"></sv-popup>
+  <sv-popup params="{ model: $data.item.popupModel }"></sv-popup>
 </div>

packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx

@@ -31,7 +31,7 @@ class SideBarPropertyGridHeader extends SurveyElementBase<ISideBarPropertyGridHe
         <div className="svc-sidebar__header-container svc-sidebar__header-container--with-subtitle">
           <div className="svc-sidebar__header-content">
             {button}
-            <Popup model={this.objectSelectionAction.popupModel} getTarget={getActionDropdownButtonTarget}></Popup>
+            <Popup model={this.objectSelectionAction.popupModel}></Popup>
           </div>
         </div>
       </div>

packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx

@@ -38,7 +38,7 @@ export class SurveyCreatorToolboxItemGroup extends CreatorModelElement<ISurveyCr
         onMouseLeave={(event: any) => this.model.onMouseLeave(this.item, event)}
       >
         <SvgIcon size={"auto"} iconName={this.item.subitemsButtonIcon} ></SvgIcon>
-        <Popup model={this.item.popupModel} getArea={this.item.getArea} />
+        <Popup model={this.item.popupModel} />
       </div>
     </>;
   }

packages/survey-creator-vue/src/side-bar/SideBarPropertyGridHeader.vue

@@ -14,7 +14,7 @@
             <span class="svc-sidebar__header-subtitle">{{ model.tooltip }}</span>
           </div>
         </div>
-        <SvComponent :is="'sv-popup'" :model="model.popupModel"></SvComponent>
+        <SvComponent :is="'sv-popup'"></SvComponent>
       </div>
     </div>
   </div>

packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue

@@ -11,15 +11,13 @@
     <SvComponent
       :is="'sv-popup'"
       :model="item.popupModel"
-      :getArea="item.getArea"
     ></SvComponent>
   </div>
 </template>
 <script lang="ts" setup>
 import { SvComponent } from "survey-vue3-ui";
 import type {
   SurveyCreatorModel,
-  IQuestionToolboxItem,
   ToolboxToolViewModel,
   QuestionToolboxItem,
 } from "survey-creator-core";