[claudiobosticco]

actually the problem is not limited to the menuButton of the AdaptiveMenu, this is the fullMenu sample:

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-09-20/AllModules Development Only (built 2024-09-20)

Hello, I just noticed that, in Shiva skin, the menuButtonIcon in the latest 13.1 is a white png:

[claudiobosticco]

Hello, any news on this issue?

[claudiobosticco]

Please note that there are other similar issues, such as the menuButton being clipped (and sometimes not even clickable), and the menuItem showing the wrong enabled state.
These issues occur when you start adjusting values in the form while there isn't enough space for the ToolStripButtons.
However, I didn't want to make the video and description too long, as I believe and hope that these are all related problems.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-09-04/Enterprise Deployment (built 2024-09-04)

Hello, to clarify, from now on I'll be testing with this specific test case, which I hope is clearer and more closely aligned with my actual use case:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 300,
    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: "1 Enabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "equals", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "2 Disabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "notEqual", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "3 Disabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "notEqual", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "4 Enabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "equals", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bobb"}
        },
        {
            title: "5 Disabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "notEqual", value: "bob@isomorphic.com"},
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bobb"}
        },
        {
            title: "6 Enabled",
            enableWhen: {fieldName: "exampleForm.values.email", operator: "equals", value: "bob@isomorphic.com"},
            visibleWhen: {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({
    title: isc.version,
    height: 270,
    width: 450,
    canDragResize: true,
    showFooter: true,
    items: [exampleForm],
    footerControls: [toolStrip]
});

I recorded my screen to help illustrate the issues:

https://www.youtube.com/watch?v=oc3BHl2-IpI

As you may see, at draw the MenuButton is clipped. Enabled and disabled states are correct (they match the titles if you don't change the values in the form).

If you try to widen the Window, the MenuButton remains clipped. Sometimes, only a few pixels are visible, making it barely clickable.

Next, I narrowed the window, and after opening the menu, you'll notice that the MenuItem "3 Disabled" is actually enabled.

I've observed similar results using Safari, Firefox, and Chrome on macOS, and I've now also tested Edge on Windows 11 Enterprise.

I run it in the showcase, both from inside a js tab, or in the browser console. But I've got the same behaviour also running the same testcase in my application.

when I run the code I see this WARN:

*14:42:58.261:MUP9:WARN:drawing:adaptiveMenu_menuButton:Attempt to draw child of an undrawn parent - ignoring
    Canvas.readyToDraw()
    Canvas.draw(_1=>undef, undef, undef)
    StatefulCanvas.draw(_1=>undef, _2=>undef, _3=>undef)
    AdaptiveMenu.createMenuButton()
    AdaptiveMenu.createChildren()
    AdaptiveMenu.layoutChildren(_1=>"resized", 0, -70)
    Canvas.$t1(_1=>undef, _2=>undef)
    Canvas.resizeBy(_1=>null, _2=>-70, _3=>undef, _4=>undef, _5=>undef, _6=>undef)
    Canvas.resizeTo(_1=>null, _2=>30, _3=>undef, _4=>undef, _5=>undef, _6=>undef, _7=>undef)
    Canvas.setHeight(_1=>30)
    Layout.setMemberBreadth(_1=>[AdaptiveMenu ID:adaptiveMenu], _2=>30)
    Layout.autoSetBreadth(_1=>[AdaptiveMenu ID:adaptiveMenu])
    Layout.$2w()
    Layout.drawChildren()
    ** recursed on Canvas.draw

on iOS I see the the clipped menuButton:


Please let me know if you need more details

[Isomorphic]

Hi Claudio
We've retested with the latest nightly build (SmartClient 13.1 dated September 3) and aren't reproducing the problems with your sample code.

There are several issues raised in this thread. If things are still misbehaving for you with the latest nightly, can you confirm:
- What bad behavior are you seeing with the latest build
- Are you using the source in this sample or something else?
- What steps (user interactions) are you performing to cause the problem to occur?
- How are you running this source? (Standalone HTML page vs the Showcase sample viewer)
- What environment or environments are you seeing the problem on


Thanks and Regards
Isomorphic Software

[claudiobosticco]

neither in
SmartClient Version: SNAPSHOT_v13.1d_2024-08-31/AllModules Development Only (built 2024-08-31)

please let me know when I may retry

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-08-30/Enterprise Development Only (built 2024-08-30)

Hello, from a quick test with the sample in post #23, it seems the fixes aren't included in today's build.

[Isomorphic]

Hi Claudio
A quick update on the various issues in this thread:
- The problem in your sample where resizing a window doesn't resize the adaptive menu in a predictable way is fixed
- The problem where adding "visibleWhen" can cause odd extra buttons to show up is also fixed
- We're still reviewing enableIf, dynamicTitle and dynamicItem and will keep you posted.

You can see the fixes for the first two points in the next nightly build (Aug 30 or above)

Regards
Isomorphic Software

[Isomorphic]

Hi Claudio
Thanks for the test cases. We are reproducing the problems you're seeing and will follow up when we have more information for you

Regards
Isomorphic Software

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-08-27/AllModules Development Only (built 2024-08-27)

Safari on iOS (MacOS Simulator)
Firefox, Chrome, Safari on MacOS

Hello, I've managed to create a testcase which reproduces the problem I've got in my application.
The problem is that in my AdaptiveMenuItems I've got an enableWhen/visibleWhen for every item.
Please try this test case:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 300,
    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"
        },
        {name: "password",
         title: "Password",
         width: "*",
         required: true,
         type: "password"
        },
        {name: "password2",
         required: true,
         title: "Password again",
         width: "*",
         type: "password",
         wrapTitle: false
        }
    ]
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    align:"center",
    defaultLayoutAlign: "center",
    items: [
        {title: "Contact", visibleWhen:{fieldName:"exampleForm.values.username", operator:"equals", value:"bob"}},
        {title: "Hire Now", visibleWhen:{fieldName:"exampleForm.values.username", operator:"equals", value:"bob"}},
        {title: "View Résumé", visibleWhen:{fieldName:"exampleForm.values.username", operator:"equals", value:"bob"}},
        {title: "Edit", visibleWhen:{fieldName:"exampleForm.values.username", operator:"equals", value:"bob"}},
        {title: "Foo", visibleWhen:{fieldName:"exampleForm.values.username", operator:"equals", value:"bob"}},
        {title: "Bar", visibleWhen:{fieldName:"exampleForm.values.username", operator:"equals", value:"bob"}}
    ]
});

isc.ToolStrip.create({
    ID: "toolStrip",
    height:40,
    members: [
    isc.IButton.create({title:"Close",icon:"Close",autoFit:true}),
    adaptiveMenu,
    isc.IButton.create({title:"Save",icon:"Save",autoFit:true})]
});

isc.Window.create({
    height:270,
    width: 450,
    canDragResize: true,
    showFooter:true,
items:[exampleForm],
    footerControls: [toolStrip]
});

this is the result on iOS:



This is Safari on MacOS:

[claudiobosticco]

another question about getAdaptiveMenu (): I see it returns correctly the "adaptiveMenuID" when the item is a ToolStripButton, but when it's a MenuItem, in the handlers there's 'menu' which actually is "adaptiveMenuID_menu", so I still have to use menu.creator. Is it intended to work like this?

[claudiobosticco]

Seems to work perfectly when the ToolStrip is in the gridComponents under the body of a grid

[claudiobosticco]

and, on iOS, happens also on a layout structured like that:



and actually also on desktop, if I narrow the browser window to 460px, and do a refresh, this is the clipped ToolStrip (or the AdaptiveMenu?):


you may see the "More..." menuButtonTitle clipped

[claudiobosticco]

Actually I've got a problem when used in a particular layout:

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    align:"center",
    defaultLayoutAlign: "center",
    items: [
        {title: "Contact", icon:"Approve"},
        {title: "Hire Now", icon:"Approve"},
        {title: "View Résumé", icon:"Approve"},
        {title: "Edit", icon:"Approve"},
        {title: "Foo", icon:"Approve"},
        {title: "Bar", icon:"Approve"}
    ]
});

isc.ToolStrip.create({
    ID: "toolStrip",
    height:40,
    members: [
    isc.IButton.create({title:"Close",icon:"Close",autoFit:true}),
    adaptiveMenu,
    isc.IButton.create({title:"Save",icon:"Save",autoFit:true})]
});

isc.Window.create({
    height:400,
    width: 400,
    canDragResize: true,
    showFooter:true,
    footerControls: [toolStrip]
});

actually in my application the behaviour is even worse that in this test case, anyway if you try it, you'll see it working at first draw and when drag-resizing if you widen the window, but if you narrow it, it will clip the ToolStrip and the AdaptiveMenu.

Maybe it's a bad usage to put a toolstrip in the window footer?