[WC-3299] Show popup content in design preview when advanced mode is enabled (#2139)

Author: r0b1n

packages/pluggableWidgets/popup-menu-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue with Advanced options mode not showing options content in Design mode.
+
 ## [4.0.3] - 2026-02-10
 
 ### Added

packages/pluggableWidgets/popup-menu-web/src/PopupMenu.editorConfig.ts

@@ -1,3 +1,10 @@
+import {
+    changePropertyIn,
+    hidePropertyIn,
+    Problem,
+    Properties,
+    transformGroupsIntoTabs
+} from "@mendix/pluggable-widgets-tools";
 import {
     ContainerProps,
     DropZoneProps,
@@ -7,13 +14,6 @@ import {
     StructurePreviewProps,
     TextProps
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
-import {
-    changePropertyIn,
-    hidePropertyIn,
-    Problem,
-    Properties,
-    transformGroupsIntoTabs
-} from "@mendix/pluggable-widgets-tools";
 
 import { BasicItemsPreviewType, PopupMenuPreviewProps } from "../typings/PopupMenuProps";
 

packages/pluggableWidgets/popup-menu-web/src/PopupMenu.editorPreview.tsx

@@ -1,56 +1,34 @@
-import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
+import classNames from "classnames";
 import { ReactElement } from "react";
-import { PopupMenu as PopupMenuComponent } from "./components/PopupMenu";
 
-import { BasicItemsType, CustomItemsType, PopupMenuPreviewProps } from "../typings/PopupMenuProps";
-import { dynamicValue } from "./utils/attrValue";
+import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
+import { PopupMenuPreviewProps } from "../typings/PopupMenuProps";
 
 export function getPreviewCss(): string {
     return require("./ui/PopupMenuPreview.scss");
 }
 
 export function preview(props: PopupMenuPreviewProps): ReactElement {
-    const basicItems: BasicItemsType[] = [];
-    const customItems: CustomItemsType[] = [];
-    const styles = parseStyle(props.style);
-
-    if (!props.advancedMode) {
-        props.basicItems.forEach(item => {
-            basicItems.push({
-                itemType: item.itemType,
-                caption: dynamicValue(item.caption),
-                action: undefined,
-                styleClass: item.styleClass
-            });
-        });
-    } else {
-        props.customItems.forEach(item => {
-            customItems.push({
-                action: undefined,
-                content: (
-                    <item.content.renderer>
-                        <div />
-                    </item.content.renderer>
-                )
-            });
-        });
-    }
+    const showMenu = props.advancedMode && props.customItems.length > 0;
 
     return (
-        <PopupMenuComponent
-            {...props}
-            class={props.className}
-            basicItems={basicItems}
-            customItems={customItems}
-            menuTrigger={
+        <div className={classNames("popupmenu", props.class)}>
+            <div className="popupmenu-trigger">
                 <props.menuTrigger.renderer>
                     <div />
                 </props.menuTrigger.renderer>
-            }
-            name="Popup Menu"
-            preview
-            style={styles}
-            tabIndex={0}
-        />
+            </div>
+            <div className="widget-popupmenu-root">
+                {showMenu && (
+                    <ul style={parseStyle(props.style)} className="popupmenu-menu">
+                        {props.customItems.map((item, index) => (
+                            <item.content.renderer key={index}>
+                                <li className={"popupmenu-custom-item"}></li>
+                            </item.content.renderer>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        </div>
     );
 }

packages/pluggableWidgets/popup-menu-web/src/__tests__/Menu.spec.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, RenderResult } from "@testing-library/react";
 import { ValueStatus } from "mendix";
 import { createElement } from "react";
+import { MenuWithContext as Menu } from "./MenuWithContext";
 import { BasicItemsType, CustomItemsType } from "../../typings/PopupMenuProps";
 import { MenuProps } from "../components/Menu";
 import { actionValue, dynamicValue } from "../utils/attrValue";
-import { MenuWithContext as Menu } from "./MenuWithContext";
 
 import "@testing-library/jest-dom";
 

packages/pluggableWidgets/popup-menu-web/src/components/PopupMenu.tsx

@@ -1,20 +1,15 @@
-import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import classNames from "classnames";
 import { ActionValue } from "mendix";
 import { ReactElement, useCallback, useEffect, useState } from "react";
-import { PopupMenuContainerProps } from "../../typings/PopupMenuProps";
-import { usePopup } from "../hooks/usePopup";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import { Menu } from "./Menu";
 import { PopupContext } from "./PopupContext";
 import { PopupTrigger } from "./PopupTrigger";
+import { PopupMenuContainerProps } from "../../typings/PopupMenuProps";
+import { usePopup } from "../hooks/usePopup";
 
-export interface PopupMenuProps extends PopupMenuContainerProps {
-    preview?: boolean;
-}
-
-export function PopupMenu(props: PopupMenuProps): ReactElement {
-    const preview = !!props.preview;
-    const [visibility, setVisibility] = useState(preview && props.menuToggle);
+export function PopupMenu(props: PopupMenuContainerProps): ReactElement {
+    const [visibility, setVisibility] = useState(props.menuToggle);
     const open = visibility;
     const popup = usePopup({
         open,

packages/pluggableWidgets/popup-menu-web/src/hooks/usePopupContext.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { PopupContext } from "../components/PopupContext";
 import { UsePopupReturn } from "./usePopup";
+import { PopupContext } from "../components/PopupContext";
 
 export const usePopupContext = (): UsePopupReturn => {
     const context = useContext(PopupContext);

packages/pluggableWidgets/popup-menu-web/src/ui/PopupMenuPreview.scss

@@ -1,5 +1,9 @@
 .popupmenu {
     width: 100%;
+    flex-direction: column;
+    .popupmenu-menu {
+        position: static;
+    }
 }
 
 .popupmenu-trigger {