fix: show popup content in design preview when advanced mode is enabled

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.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/ui/PopupMenuPreview.scss

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