AdaptiveMenu problem with mutually exclusive visibleWhen criteria

[claudiobosticco]

SmartClient Version: v13.1p_2024-12-31/AllModules Development Only (built 2024-12-31)

Safari on iPad Mini 6th gen iOS 17.4 (XCode Simulator)

Hello, please open the showcase with these density settings:
https://www-demos.smartclient.com/sm...rease=15&dhc=1
using an iPad Mini in portrait orientation (probably it's possible to replicate it with a different screen resolution by adding menu items), and run this code from the Safari console, so that the Window is at fullscreen:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: "100%",
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        },
        {
            name: "email",
            title: "Email",
            required: true,
            width: "*",
            type: "text",
            defaultValue: "bob@isomorphic.com"
        }
    ]
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    menuButtonTitle: "More...",
    align: "center",
    defaultLayoutAlign: "center",
    items: [
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit",
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "Foo Bar",
            icon:"Edit",
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
        },
        {
            title: "Foo Bar Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar Bar",
            icon:"Edit"
        }
    ]
});

isc.ToolStrip.create({
    ID: "toolStrip",
    height: 32,
    width: "100%",
    layoutMargin: 0,
    defaultLayoutAlign: "center",
    members: [
        isc.IButton.create({title: "Close", icon: "Close", autoFit: true}),
        adaptiveMenu,
        isc.IButton.create({title: "Save", icon: "Save", autoFit: true})]
});

isc.Window.create({
    ID: "testWindow",
    title: isc.version,
    maximized:true,
    showFooter: true,
    items: [exampleForm],
    footerControls: [toolStrip],
    layoutBottomMargin: 20
}).show()

Note the 2 AdaptiveMenuItems with the mutually exclusive visibleWhen criteria (a trick I use as dynamicTitle isn't currently supported).

You'll see that there isn't enough space for the last AdaptiveMenuItem as a button, so there's a Menu for it.

then switch to landscape orientation, and then again to portrait: you'll see that this time the last AdaptiveMenuItem appears as a button, but it's clipped:

[Isomorphic]

Claudio, a fix has been committed for this issue. Please retest with builds starting on Jan 10.

[claudiobosticco]

SmartClient Version: v13.1p_2025-01-10/Enterprise Deployment (built 2025-01-10)

Hello, I see it's fixed, thank you very much.

I’ve noticed a change in behavior in my application that could actually be a nice feature, but I’d like to confirm with you if it’s intended, as I'm not sure it's always a good UE:
It seems that the order of AdaptiveMenuItems is no longer fixed to their declaration order. Instead, the adaptive menu now displays enabled items first, followed by disabled ones.
Is this an intended change? I can provide a test case if needed.

[Isomorphic]

Claudio, no change in ordering is intended. When did you see this behavior change? And yes, a test case may be helpful to see exactly what you are experiencing.

[claudiobosticco]

v13.1p_2025-01-11/AllModules Development Only

Safari on iPad Mini 6th gen iOS 17.4 (XCode Simulator)

Hello, again as in the original post, please open the showcase with these density settings:
https://www-demos.smartclient.com/sm...rease=15&dhc=1
using an iPad Mini in portrait orientation, and run this code from the Safari console, so that the Window is at fullscreen:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: "100%",
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        },
        {
            name: "email",
            title: "Email",
            required: true,
            width: "*",
            type: "text",
            defaultValue: "bob@isomorphic.com"
        }
    ]
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    menuButtonTitle: "More...",
    align: "center",
    defaultLayoutAlign: "center",
    items: [
        {
            title: "Foo Bar",
            icon: "Edit"
        },
        {
            title: "Foo Bar",
            icon: "Edit"
        },

        {
            title: "Foo Bar",
            icon: "Edit"
        },
        {
            title: "Foo Bar Bar",
            icon: "Edit"
        },
        {
            title: "Foo Bar",
            icon: "Cancel",
            enableWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
        },
        {
            title: "Foo Bar Bar",
            icon: "Cancel",
            enableWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
        },
        {
            title: "Foo Bar",
            icon: "Close",
            enableWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        }
    ]
});

isc.ToolStrip.create({
    ID: "toolStrip",
    height: 32,
    width: "100%",
    layoutMargin: 0,
    defaultLayoutAlign: "center",
    members: [
        isc.IButton.create({title: "Close", icon: "Close", autoFit: true}),
        adaptiveMenu,
        isc.IButton.create({title: "Save", icon: "Save", autoFit: true})]
});

isc.Window.create({
    ID: "testWindow",
    title: isc.version,
    maximized: true,
    showFooter: true,
    items: [exampleForm],
    footerControls: [toolStrip],
    layoutBottomMargin: 20
}).show()

I've slightly modified the test case of the original post, you'll see that, in portrait orientation, the last AdaptiveMenuItem (which has icon "Close"), appears before of the two disabled items (with "Cancel" icon), while if you switch to landscape it correctly appears as the last button:

[Isomorphic]

Thanks again for the test case, Claudio. The issue here was that the wrong 'last' item was being pulled from the inlined items to be placed in the menu causing the order to be misrepresented. This has been fixed in builds starting on 21 January.

[claudiobosticco]

SmartClient Version: v13.1p_2025-01-23/AllModules Development Only (built 2025-01-23)

Hello, I can confirm that it's working now, thank you very much!

Using the 2025-01-18 build, yesterday, I encountered another problem, but I'm happy to say that it's also been fixed in today's build.

[claudiobosticco]

SmartClient Version: v13.1p_2025-05-08/Enterprise Deployment (built 2025-05-08)

Hello, unfortunately, with the latest 13.1 build, I'm seeing the exact same issue as in post #1 again.

[claudiobosticco]

SmartClient Version: v13.1p_2025-05-15/AllModules Development Only (built 2025-05-15)

Safari, Firefox, Chrome on MacOS

Hi, the issue is actually reproducible on desktop as well. Tested in the online showcase https://www-demos.smartclient.com/sm...13.1/showcase/, using the Shiva skin with Spacious density: the 6th ToolStrip button appears to be clipped.

Test case:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: "100%",
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        },
        {
            name: "email",
            title: "Email",
            required: true,
            width: "*",
            type: "text",
            defaultValue: "bob@isomorphic.com"
        }
    ]
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    menuButtonTitle: "More...",
    align: "center",
    defaultLayoutAlign: "center",
    items: [
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit",
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "Foo Bar",
            icon:"Edit",
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
        },
        {
            title: "Foo Bar Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar Bar",
            icon:"Edit"
        }
    ]
});

isc.ToolStrip.create({
    ID: "toolStrip",
    height: 32,
    width: "100%",
    layoutMargin: 0,
    defaultLayoutAlign: "center",
    members: [
        isc.IButton.create({title: "Close", icon: "Close", autoFit: true}),
        adaptiveMenu,
        isc.IButton.create({title: "Save", icon: "Save", autoFit: true})]
});

isc.Window.create({
    ID: "testWindow",
    width:700, height:400,
    title: isc.version,
    showFooter: true,
    items: [exampleForm],
    footerControls: [toolStrip],
    layoutBottomMargin: 20
}).show()

[claudiobosticco]

I'll add a detail that probably doesn't change the nature of the bug: while testing my application with Cypress, I happened to see the first button clipped instead of the last one.

[Isomorphic]

Sorry for the delay, Claudio. Please check builds starting with May 20 for a fix.

[claudiobosticco]

SmartClient Version: v13.1p_2025-05-22/Enterprise Deployment (built 2025-05-22)

Hi, I can confirm that the test case above is resolved.
However, unfortunately I found another situation in my application where I’m seeing issues, and I believe I was able to reproduce it in the showcase.

The test case is the same as the previous one, but with the Window width reduced to 650. It should be tested with the Shiva skin and Spacious density.

isc.DynamicForm.create({
    ID: "exampleForm",
    width: "100%",
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        },
        {
            name: "email",
            title: "Email",
            required: true,
            width: "*",
            type: "text",
            defaultValue: "bob@isomorphic.com"
        }
    ]
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    menuButtonTitle: "More...",
    align: "center",
    defaultLayoutAlign: "center",
    items: [
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit",
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "Foo Bar",
            icon:"Edit",
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
        },
        {
            title: "Foo Bar Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar Bar",
            icon:"Edit"
        }
    ]
});

isc.ToolStrip.create({
    ID: "toolStrip",
    height: 32,
    width: "100%",
    layoutMargin: 0,
    defaultLayoutAlign: "center",
    members: [
        isc.IButton.create({title: "Close", icon: "Close", autoFit: true}),
        adaptiveMenu,
        isc.IButton.create({title: "Save", icon: "Save", autoFit: true})]
});

isc.Window.create({
    ID: "testWindow",
    width:650, height:400,
    title: isc.version,
    showFooter: true,
    items: [exampleForm],
    footerControls: [toolStrip],
    layoutBottomMargin: 20
}).show()

When running it, you’ll see:
- Three visible ToolStripButtons plus the "More..." MenuButton

At this point, there's an initial issue, because there’s actually enough space for a fourth ToolStripButton before the "More..." MenuButton appears:



Anyway, continuing the test:
- Run testWindow.maximize()
- Then run testWindow.restore()

At this point, you’ll see five visible ToolStripButtons plus the "More..." MenuButton.
This confirms there was at least space for the fourth ToolStripButton, but not for the fifth - in fact, the "More..." MenuButton is clipped, and that’s the second issue: