Merge pull request #458 from contentstack/disable-scroll-when-field-modifer-is-active

Disable scroll when field modifer is active

Author: SahilCs15

src/visualBuilder/components/FieldLocationAppList.tsx

@@ -4,6 +4,7 @@ import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
 import { visualBuilderStyles } from "../visualBuilder.style";
 import classNames from "classnames";
+import { CslpData } from "../../utils/cslpdata";
 
 interface App {
     app_installation_uid: string;
@@ -30,6 +31,9 @@ interface FieldLocationAppListProps {
     apps: App[];
     position: "left" | "right";
     toolbarRef: React.RefObject<HTMLDivElement>;
+    domEditStack:CslpData[]
+    setDisplayAllApps: (displayAllApps: boolean) => void;
+    displayAllApps: boolean;
 }
 
 const normalize = (text: string) =>
@@ -42,6 +46,8 @@ export const FieldLocationAppList = ({
     apps,
     position,
     toolbarRef,
+    domEditStack,
+    setDisplayAllApps,
 }: FieldLocationAppListProps) => {
     const remainingApps = apps.filter((app, index) => index !== 0);
     const [search, setSearch] = useState("");
@@ -63,8 +69,10 @@ export const FieldLocationAppList = ({
             {
                 app: app,
                 position: toolbarRef.current?.getBoundingClientRect(),
+                DomEditStack:domEditStack
             }
         );
+        setDisplayAllApps(false);
     };
 
     return (

src/visualBuilder/components/FieldLocationIcon.tsx

@@ -6,19 +6,22 @@ import React, { useRef } from "preact/compat";
 import { LoadingIcon } from "./icons/loading";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
+import { CslpData } from "../../utils/cslpdata";
 
 export const FieldLocationIcon = ({
     fieldLocationData,
     multipleFieldToolbarButtonClasses,
     handleMoreIconClick,
     moreButtonRef,
     toolbarRef,
+    domEditStack
 }: {
     fieldLocationData: any;
     multipleFieldToolbarButtonClasses: any;
     handleMoreIconClick: () => void;
     moreButtonRef: any;
     toolbarRef: any;
+    domEditStack:CslpData[]
 }) => {
 
 
@@ -32,6 +35,7 @@ export const FieldLocationIcon = ({
         visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP, {
             app,
             position: toolbarRef.current?.getBoundingClientRect(),
+            DomEditStack:domEditStack
         });
     };
 

src/visualBuilder/components/FieldToolbar.tsx

@@ -1,4 +1,5 @@
 import { CslpData } from "../../cslp/types/cslp.types";
+import { CslpData as CslpDataUtil } from "../../utils/cslpdata";
 import getChildrenDirection from "../utils/getChildrenDirection";
 import {
     ALLOWED_MODAL_EDITABLE_FIELD,
@@ -195,6 +196,9 @@ function FieldToolbarComponent(
         // }
     }
 
+    const domEditStack=getDOMEditStack(eventDetails.editableElement) as CslpDataUtil[]
+
+
     const invertTooltipPosition =
         targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
 
@@ -570,6 +574,7 @@ function FieldToolbarComponent(
                             handleMoreIconClick={handleMoreIconClick}
                             moreButtonRef={moreButtonRef}
                             toolbarRef={toolbarRef}
+                            domEditStack={domEditStack}
                         />
                     </>
                 </div>
@@ -579,6 +584,9 @@ function FieldToolbarComponent(
                     toolbarRef={toolbarRef}
                     apps={fieldLocationData?.apps || ([] as any[])}
                     position={appListPosition}
+                    domEditStack={domEditStack}
+                    setDisplayAllApps={setDisplayAllApps}
+                    displayAllApps={displayAllApps}
                 />
             )}
         </div>

src/visualBuilder/components/__test__/FieldLocationAppList.test.tsx

@@ -145,17 +145,29 @@ describe("FieldLocationAppList", () => {
     });
 
     it("should send event when app is clicked", () => {
-        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} />);
+        const mockSetDisplayAllApps = vi.fn();
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={mockSetDisplayAllApps} displayAllApps={true} />);
 
         const secondApp = screen.getByText("Second App");
         fireEvent.click(secondApp);
 
         expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith("field-location-selected-app", {
             app: mockApps[1],
             position: { top: 0, left: 0, right: 100, bottom: 50, width: 100, height: 50, x: 0, y: 0 },
+            DomEditStack: []
         });
     });
 
+    it("should close the app list when an app is selected", () => {
+        const mockSetDisplayAllApps = vi.fn();
+        render(<FieldLocationAppList apps={mockApps} position="right" toolbarRef={mockToolbarRef} domEditStack={[]} setDisplayAllApps={mockSetDisplayAllApps} displayAllApps={true} />);
+
+        const secondApp = screen.getByText("Second App");
+        fireEvent.click(secondApp);
+
+        expect(mockSetDisplayAllApps).toHaveBeenCalledWith(false);
+    });
+
 
 
 

src/visualBuilder/index.ts

@@ -367,6 +367,22 @@ export class VisualBuilder {
                         VisualBuilderPostMessageEvents.SEND_VARIANT_AND_LOCALE
                     );
 
+                        visualBuilderPostMessage?.on<{
+                            scroll: boolean
+                        }>(
+                            VisualBuilderPostMessageEvents.TOGGLE_SCROLL,
+                            (event) => {
+                                if (!event.data.scroll) {
+                                    document.body.style.overflow = 'hidden'
+                                } else {
+                                    document.body.style.overflow = 'auto'
+                                }
+                            }
+                        );
+                    
+                    
+                    
+
                     useHideFocusOverlayPostMessageEvent({
                         overlayWrapper: this.overlayWrapper,
                         visualBuilderContainer: this.visualBuilderContainer,

src/visualBuilder/utils/types/postMessage.types.ts

@@ -50,4 +50,5 @@ export enum VisualBuilderPostMessageEvents {
     COLLAB_THREADS_REMOVE = "collab-threads-remove",
     COLLAB_THREAD_REOPEN = "collab-thread-reopen",
     COLLAB_THREAD_HIGHLIGHT = "collab-thread-highlight",
+    TOGGLE_SCROLL = "toggle-scroll",
 }