Merge pull request #8169 from surveyjs/bug/8106

Work for #8106: fix popup works incorrectly when changing isVisible twice

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

@@ -8,7 +8,6 @@ import { PopupBaseViewModel, PopupModalViewModel } from "survey-core";
   })
 
 export class PopupBaseContainerComponent<T extends PopupBaseViewModel = PopupBaseViewModel> extends BaseAngular<T> {
-  private prevIsVisible: boolean = false;
   @Input() model!: T;
 
   constructor(changeDetectorRef: ChangeDetectorRef) {
@@ -48,12 +47,9 @@ export class PopupBaseContainerComponent<T extends PopupBaseViewModel = PopupBas
   protected override afterUpdate(isSync: boolean = false): void {
     super.afterUpdate(isSync);
     if(!isSync) {
-      if (!this.prevIsVisible && this.model.isVisible) {
+      if (!this.model.isPositionSet && this.model.isVisible) {
         this.model.updateOnShowing();
       }
-      if (this.prevIsVisible !== this.model.isVisible) {
-        this.prevIsVisible = this.model.isVisible;
-      }
     }
   }
   public clickInside(event: any) {

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

@@ -58,7 +58,6 @@ import type { PopupBaseViewModel } from "survey-core";
 import { onMounted, onUpdated } from "vue";
 
 const props = defineProps<{ model: PopupBaseViewModel }>();
-let prevIsVisible = false;
 const clickInside = (event: any) => {
   event.stopPropagation();
 };
@@ -67,10 +66,9 @@ useBase(() => props.model);
 
 onUpdated(() => {
   const model = props.model;
-  if (!prevIsVisible && model.isVisible) {
+  if (model.isVisible && !model.isPositionSet) {
     props.model.updateOnShowing();
   }
-  prevIsVisible = model.isVisible;
 });
 onMounted(() => {
   if (props.model.isVisible) {

src/popup-dropdown-view-model.ts

@@ -211,6 +211,7 @@ export class PopupDropdownViewModel extends PopupBaseViewModel {
       this.resizeEventCallback();
     }
     DomWindowHelper.addEventListener("scroll", this.scrollEventCallBack);
+    this._isPositionSetValue = true;
   }
   private get shouldCreateResizeCallback(): boolean {
     return !!DomWindowHelper.getVisualViewport() && this.isOverlay && IsTouch;

src/popup-view-model.ts

@@ -38,6 +38,7 @@ export class PopupBaseViewModel extends Base implements IAnimationConsumer {
       if(!val) {
         this.updateOnHiding();
         this.updateIsVisible(val);
+        this._isPositionSetValue = false;
       }
       else {
         this.updateIsVisible(val);
@@ -230,6 +231,10 @@ export class PopupBaseViewModel extends Base implements IAnimationConsumer {
       this.focusContainer();
     }
   }
+  protected _isPositionSetValue: boolean = false;
+  public get isPositionSet(): boolean {
+    return this._isPositionSetValue;
+  }
 
   public updateOnShowing(): void {
     this.prevActiveElement = <HTMLElement>settings.environment.root.activeElement;
@@ -239,6 +244,7 @@ export class PopupBaseViewModel extends Base implements IAnimationConsumer {
     }
 
     this.switchFocus();
+    this._isPositionSetValue = true;
   }
 
   public updateOnHiding(): void {

src/react/components/popup/popup.tsx

@@ -72,7 +72,6 @@ ReactElementFactory.Instance.registerElement(
 );
 
 export class PopupContainer extends SurveyElementBase<any, any> {
-  public prevIsVisible: boolean = false;
   constructor(props: any) {
     super(props);
   }
@@ -90,10 +89,9 @@ export class PopupContainer extends SurveyElementBase<any, any> {
   };
   componentDidUpdate(prevProps: any, prevState: any) {
     super.componentDidUpdate(prevProps, prevState);
-    if (!this.prevIsVisible && this.model.isVisible) {
+    if (!this.model.isPositionSet && this.model.isVisible) {
       this.model.updateOnShowing();
     }
-    this.prevIsVisible = this.model.isVisible;
   }
   renderContainer(popupBaseViewModel: PopupBaseViewModel): JSX.Element {
     const headerPopup = popupBaseViewModel.showHeader ? this.renderHeaderPopup(popupBaseViewModel) : null;

src/vue/components/popup/popup-container.vue

@@ -65,18 +65,16 @@ import { BaseVue } from "../../base";
 @Component
 export class PopupContainer extends BaseVue {
   @Prop() model: PopupBaseViewModel;
-  private prevIsVisible: boolean;
   protected getModel() {
     return this.model;
   }
   clickInside(event: any) {
     event.stopPropagation();
   }
   onUpdated() {
-    if (!this.prevIsVisible && this.model.isVisible) {
+    if (!this.model.isPositionSet && this.model.isVisible) {
       this.model.updateOnShowing();
     }
-    this.prevIsVisible = this.model.isVisible;
   }
 }
 // replace to showDialog then delete

testCafe/components/popup.ts

@@ -120,6 +120,25 @@ frameworks.forEach(async framework => {
     await t.expect(popupSelector.exists).notOk();
   });
 
+  test("check ordinary popup when isVisible is changed twice", async t => {
+    await initSurvey(framework, json, { onGetQuestionTitleActions: addDropdownTitleAction });
+
+    await t
+      .click(clickButton)
+      .expect(popupSelector.visible).ok();
+    await ClientFunction(() => {
+      const action = (window as any).survey.getAllQuestions()[0].titleActions[0];
+      action.action();
+      action.action();
+    })();
+
+    let popupClientRect = await getElementClientRect(".sv-popup__container");
+    let itemClientRect = await getElementClientRect(".sv-action-bar-item");
+    await t
+      .expect(Math.round(itemClientRect.left) - 8 - Math.round(popupClientRect.width)).eql(Math.round(popupClientRect.left))
+      .expect(Math.round(itemClientRect.top)).eql(Math.round(popupClientRect.top));
+  });
+
   test("check showPointer popup position", async t => {
     await initSurvey(framework, json, { onGetQuestionTitleActions: addDropdownTitleAction });
     await ClientFunction(selector => {