Menu keeps "Over" style after click or "Dismiss"-click

[Blama]

Hi Isomorphic,

please see this online showcase sample in Graphite skin (important) and these two tests:

1. On click, "Show Menu" turns yellow (OK). On click on "Item 1" it turns gray again (OK). On dismiss of the SC.say-window, it turns yellow again (Not OK).
2. On click, "Show Menu" turns yellow (OK). On click in the empty sample area ("Dismiss"-click) it does not turn gray again (Not OK).
   Note that the behavior is OK if the Dismiss-click goes outside the sample area, e.g. in an empty part of the TabSet.

This is because the style is not reset from "menuButtonOver".

Tested with FF26 and GC45 in the latest online showcase (v10.0p_2015-09-30).

Best regards
Blama

[Isomorphic]

This is actually indicating the keyboard focus. In some cases the "Over" styling is used to indicate a widget has keyboard focus (see button.showFocusedAsOver).
In this sample when you click the menu item, the menu is dismissed and the pop up dialog gets focus. When the dialog is dismissed, focus goes back to the Menu button. Clicking outside the menu button does not necessarily take keyboard focus from the button - a Tab keypress would, or clicking on another focusable element on the page would, but clicking on an unfocusable chunk of background would not (this is native behavior).

So overall - this is as expected and we have no immediate plans to make any changes here

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

I was able to solve my use case with button.showFocusedAsOver(false) and additional CSS rules.

Thank you & Best regards
Blama

[Grittle]

Hi Isomorphic,

I was able to read more about HGH-X2 here and solve my use case with button.showFocusedAsOver(false) and additional CSS rules.

Thank you & Best regards
Blama

Hi Blama, can you go into more detail on how to fix this for a newb like me.

[Blama]

Hi Grittle,

I don't remember the problem back then, but this is what I did according to the change log:

        IMenuButton menuButton = new IMenuButton(title, menu);
        menuButton.setWidth("*");
        menuButton.setHeight(30);
        menuButton.setBaseStyle("[B]settingsDropdownMenu[/B]");
        menuButton.[B]setShowFocusedAsOver(false)[/B];

Added this to skin_styles.css in your skin-modification at the very end of the file (see the Quick Start Guide for custom skin best practices):

.settingsDropdownMenu,
.settingsDropdownMenuOver, .settingsDropdownMenuDown, .settingsDropdownMenuFocused,
.settingsDropdownMenuFocusedOver, .settingsDropdownMenuFocusedDown{
    padding: 0 5px;
}

.settingsDropdownMenuOver, .settingsDropdownMenuFocusedOver, .settingsDropdownMenuDown, .settingsDropdownMenuFocusedDown{
    background-color: #ccc;
}

In order to see which style is currently applied the Inspect-function of the FF/Chrome F12 tools is really useful.

I hope this helps you.

Best regards
Blama

[Kiaami]

This is actually indicating the keyboard focus. In some cases the "Over" styling is used to indicate a widget has keyboard focus (see button.showFocusedAsOver).
In this sample when you click the menu item, the menu is dismissed and the pop up dialog gets focus. When the dialog is dismissed, focus goes back to this list of legal steroids gnc the Menu button. Clicking outside the menu button does not necessarily take keyboard focus from the button - a Tab keypress would, or clicking on another focusable element on the page would, but clicking on an unfocusable chunk of background would not (this is native behavior).

So overall - this is as expected and we have no immediate plans to make any changes here

Regards
Isomorphic Software

Thanks for sharing helpful detail with us!