remove getArea and getTarget props

packages/survey-angular-ui/src/components/action-bar/action-bar-item-dropdown.component.html

@@ -3,5 +3,5 @@
         <svg *ngIf="model.iconName" [iconName]="model.iconName" [size]="model.iconSize" [title]="model.tooltip || model.title" [class]="model.cssClasses.itemIcon" sv-ng-svg-icon></svg>
         <span *ngIf="model.hasTitle" [class]="model.getActionBarItemTitleCss()">{{ model.title }}</span>
     </button>
-    <sv-ng-popup [popupModel]="model.popupModel" [getTarget]="getTarget"></sv-ng-popup>
+    <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
 </ng-template>

packages/survey-angular-ui/src/components/action-bar/action-bar-item-dropdown.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from "@angular/core";
-import { ActionDropdownViewModel, getActionDropdownButtonTarget } from "survey-core";
+import { ActionDropdownViewModel } from "survey-core";
 import { BaseAngular } from "../../base-angular";
 import { AngularComponentFactory } from "../../component-factory";
 
@@ -10,7 +10,6 @@ import { AngularComponentFactory } from "../../component-factory";
 })
 export class ActionBarItemDropdownComponent extends BaseAngular {
   @Input() model: any
-  public getTarget: (container: HTMLElement) => HTMLElement = getActionDropdownButtonTarget;
   protected viewModel!: ActionDropdownViewModel;
 
   protected getModel() {

packages/survey-angular-ui/src/components/popup/popup.component.ts

@@ -34,9 +34,7 @@ export class PopupComponent extends BaseAngular<PopupModel> {
   private setContainerElement(): void {
     if (!!this.containerRef?.nativeElement) {
       const container = this.containerRef.nativeElement as HTMLElement;
-      this.model.setComponentElement(container,
-        this.getTarget ? this.getTarget(container.parentElement as HTMLElement) : container?.parentElement?.parentElement,
-        this.getArea ? this.getArea(container.parentElement as HTMLElement) : undefined);
+      this.model.setComponentElement(container);
     }
   }
   ngAfterViewInit(): void {

packages/survey-core/src/actions/action.ts

@@ -205,6 +205,7 @@ export function createPopupModelWithListModel(listOptions: IListModel, popupOpti
   _popupOptions.onDispose = () => { listModel.dispose(); };
   const popupModel: PopupModel = new PopupModel("sv-list", { model: listModel }, _popupOptions);
   popupModel.isFocusedContent = listModel.showFilter;
+  popupModel.getTargetCallback = getActionDropdownButtonTarget;
   popupModel.onShow = () => {
     if (!!_popupOptions.onShow) _popupOptions.onShow();
     listModel.scrollToSelectedItem();

packages/survey-core/src/popup-dropdown-view-model.ts

@@ -211,9 +211,12 @@ export class PopupDropdownViewModel extends PopupBaseViewModel {
     super(model);
     this.model.onRecalculatePosition.add(this.recalculatePositionHandler);
   }
-  public setComponentElement(componentRoot: HTMLElement, targetElement?: HTMLElement | null, areaElement?: HTMLElement | null): void {
+  public setComponentElement(componentRoot: HTMLElement): void {
     super.setComponentElement(componentRoot);
 
+    const targetElement: HTMLElement = this.model.getTargetCallback ? this.model.getTargetCallback(componentRoot) : undefined;
+    const areaElement: HTMLElement = this.model.getAreaCallback ? this.model.getAreaCallback(componentRoot) : undefined;
+
     if (!!componentRoot && !!componentRoot.parentElement && !this.isModal) {
       this.targetElement = targetElement || componentRoot.parentElement;
       this.areaElement = areaElement;

packages/survey-core/src/popup-view-model.ts

@@ -308,7 +308,7 @@ export class PopupBaseViewModel extends Base implements IAnimationConsumer {
       getElement(settings.environment.popupMountContainer).appendChild(container);
     }
   }
-  public setComponentElement(componentRoot: HTMLElement, targetElement?: HTMLElement | null, areaElement?: HTMLElement | null): void {
+  public setComponentElement(componentRoot: HTMLElement): void {
     if (!!componentRoot) {
       this.containerElement = componentRoot;
     }

packages/survey-core/src/popup.ts

@@ -9,6 +9,8 @@ export interface IPopupOptionsBase {
   onShow?: () => void;
   onCancel?: () => void;
   onDispose?: () => void;
+  getTargetCallback?: (container: HTMLElement) => HTMLElement;
+  getAreaCallback?: (container: HTMLElement) => HTMLElement;
   cssClass?: string;
   title?: string;
   verticalPosition?: VerticalPosition;
@@ -34,6 +36,8 @@ export class PopupModel<T = any> extends Base implements IPopupOptionsBase {
   public onHide: () => void = () => { };
   public onShow: () => void = () => { };
   public onDispose: () => void = () => { };
+  public getTargetCallback?: (container: HTMLElement) => HTMLElement;
+  public getAreaCallback?: (container: HTMLElement) => HTMLElement;
 
   @property() contentComponentName: string;
   @property() contentComponentData: T;

packages/survey-react-ui/src/components/action-bar/action-bar-item-dropdown.tsx

@@ -14,7 +14,7 @@ export class SurveyActionBarItemDropdown extends SurveyActionBarItem {
     return (
       <>
         {button}
-        <Popup model={this.item.popupModel} getTarget={getActionDropdownButtonTarget}></Popup>
+        <Popup model={this.item.popupModel}></Popup>
       </>
     );
   }

packages/survey-react-ui/src/components/popup/popup.tsx

@@ -6,8 +6,6 @@ import { SurveyActionBar } from "../action-bar/action-bar";
 
 interface IPopupProps {
   model: PopupModel;
-  getTarget?: (container: HTMLElement) => HTMLElement;
-  getArea?: (container: HTMLElement) => HTMLElement;
 }
 
 export class Popup extends SurveyElementBase<IPopupProps, any> {
@@ -29,11 +27,7 @@ export class Popup extends SurveyElementBase<IPopupProps, any> {
   }
   private setTargetElement(): void {
     const container = this.containerRef.current as HTMLElement;
-    this.popup.setComponentElement(
-      container,
-      this.props.getTarget ? this.props.getTarget(container) : undefined,
-      this.props.getArea ? this.props.getArea(container) : undefined
-    );
+    this.popup.setComponentElement(container);
   }
   componentDidMount(): void {
     super.componentDidMount();

packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue

@@ -33,7 +33,6 @@
   <SvComponent
     :is="'sv-popup'"
     :model="item.popupModel"
-    :getTarget="getTarget"
   ></SvComponent>
 </template>
 <script lang="ts">
@@ -51,7 +50,6 @@ import {
   getActionDropdownButtonTarget,
 } from "survey-core";
 const props = defineProps<{ item: Action }>();
-const getTarget = getActionDropdownButtonTarget;
 let viewModel = undefined as any as ActionDropdownViewModel;
 
 useBase(

packages/survey-vue3-ui/src/components/popup/Popup.vue

@@ -12,8 +12,6 @@ import { useBase } from "@/base";
 import { PopupModel, createPopupViewModel } from "survey-core";
 import { shallowRef, ref, onMounted, watch, onUnmounted } from "vue";
 const props = defineProps<{
-  getTarget?: (el: HTMLElement) => HTMLElement;
-  getArea?: (el: HTMLElement) => HTMLElement;
   model: PopupModel;
 }>();
 const popupViewModel = shallowRef();
@@ -22,11 +20,7 @@ const root = ref<HTMLElement>(null as any);
 const setContainerElement = () => {
   const container = root.value;
   if (container) {
-    popupViewModel.value.setComponentElement(
-      container,
-      props.getTarget ? props.getTarget(container) : undefined,
-      props.getArea ? props.getArea(container) : undefined
-    );
+    popupViewModel.value.setComponentElement(container);
   }
 };
 

src/knockout/components/action-bar/action-bar-item-dropdown.html

@@ -9,5 +9,5 @@
   <span data-bind="text: title, css: getActionBarItemTitleCss()"></span>
   <!-- /ko -->
 </button>
-<sv-popup params="{ model: popupModel, getTarget: $parent.getTarget }"></sv-popup>
+<sv-popup params="{ model: popupModel }"></sv-popup>
 <!-- /ko -->

src/knockout/components/popup/popup.ts

@@ -80,7 +80,7 @@ ko.components.register("sv-popup", {
     createViewModel: (params: any, componentInfo: any) => {
       const container = componentInfo.element.nodeType === Node.COMMENT_NODE ? componentInfo.element.nextElementSibling : componentInfo.element;
       const viewModel = createPopupViewModel(ko.unwrap(params.model));
-      viewModel.setComponentElement(container, params.getTarget ? params.getTarget(container) : undefined, params.getArea ? params.getArea(container) : undefined);
+      viewModel.setComponentElement(container);
       return new PopupViewModel(viewModel);
     },
   },

src/vue/components/action-bar/action-bar-item-dropdown.vue

@@ -34,8 +34,7 @@
       >
     </button>
     <sv-popup
-      :model="item.popupModel"
-      :getTarget="getTarget"></sv-popup>
+      :model="item.popupModel"></sv-popup>
   </div>
 </template>
 
@@ -48,7 +47,6 @@ import { ActionDropdownViewModel, getActionDropdownButtonTarget } from "survey-c
 @Component
 export class ActionBarItemDropdownViewModel extends ActionBarItemViewModel {
   private viewModel: ActionDropdownViewModel;
-  public getTarget: (container: HTMLElement) => HTMLElement = getActionDropdownButtonTarget;
   constructor() {
     super();
     this.viewModel = new ActionDropdownViewModel(this.item);

src/vue/components/popup/popup.vue

@@ -10,8 +10,6 @@ import { BaseVue } from "../../base";
 @Component
 export class Popup extends BaseVue {
   @Prop() model: PopupModel;
-  @Prop() getTarget?: (container: HTMLElement) => HTMLElement;
-  @Prop() getArea?: (container: HTMLElement) => HTMLElement;
   popupViewModel: PopupBaseViewModel;
   protected getModel() {
     return this.model;
@@ -22,7 +20,7 @@ export class Popup extends BaseVue {
   }
   onMounted() {
     const container = (this.$el as HTMLElement) as HTMLElement;
-    this.popupViewModel.setComponentElement(container, this.getTarget ? this.getTarget(container) : undefined, this.getArea ? this.getArea(container) : undefined);
+    this.popupViewModel.setComponentElement(container);
   }
   destroyed() {
     this.popupViewModel.dispose();