Hello Iso,
we have stumbled upon an issue regarding Menus which have their MenuItems hidden via CSS's display:none.
Under some conditions, this setup causes the Entire menu to bug out and not respond (clicking away still dismisses the menu).
Test case
CSS
Basically, what we are trying to achieve is to show/hide certain MenuItems inside a Menu according to some conditions (for simplicity represented by changing variable 'k' inside the test case).
In order to hide an Item, CSS display:none property is used.
Side question: is there a better solution to dynamically hiding certain MenuItems?
SmartClient Version: v11.1p_2018-03-09/Pro Deployment (built 2018-03-09)
Chrome v. 64.0.3282.186
we have stumbled upon an issue regarding Menus which have their MenuItems hidden via CSS's display:none.
Under some conditions, this setup causes the Entire menu to bug out and not respond (clicking away still dismisses the menu).
Test case
Code:
@Override public void onModuleLoad() { MenuItem item1 = new MenuItem("item1"); item1.addClickHandler(new ClickHandler() { @Override public void onClick(MenuItemClickEvent event) { SC.say("clicked item1"); } }); item1.setEnableIfCondition(new MenuItemIfFunction() { @Override public boolean execute(Canvas target, Menu menu, MenuItem item) { if(k%2 == 0) { item.set_baseStyle("actionToolbarMoreMenuItemHidden"); } else { item.set_baseStyle("actionToolbarMoreMenuItem"); } menu.markForRedraw(); return true; } }); MenuItem item2 = new MenuItem("item2"); item2.addClickHandler(new ClickHandler() { @Override public void onClick(MenuItemClickEvent event) { SC.say("clicked item2"); } }); item2.setEnableIfCondition(new MenuItemIfFunction() { @Override public boolean execute(Canvas target, Menu menu, MenuItem item) { if(k%2 == 1) { item.set_baseStyle("actionToolbarMoreMenuItemHidden"); } else { item.set_baseStyle("actionToolbarMoreMenuItem"); } menu.markForRedraw(); return true; } }); Menu menu = new Menu(); menu.addItem(item1); menu.addItem(item2); HLayout layout = new HLayout(); layout.setWidth100(); layout.setHeight100(); layout.setBackgroundColor("green"); layout.setContextMenu(menu); layout.draw(); Scheduler.get().scheduleIncremental(new Scheduler.RepeatingCommand() { @Override public boolean execute() { k++; return true; } }); }
Code:
.actionToolbarMoreMenuItemHidden, .actionToolbarMoreMenuItemHiddenDisabled, .actionToolbarMoreMenuItemHiddenOver { display: none; } .actionToolbarMoreMenuItem, .actionToolbarMoreMenuItemOver, .actionToolbarMoreMenuItemDisabled { font-size: 12px; text-overflow: ellipsis; color: #000000; background-color: #ACBBDB; height: 25px !important; } .actionToolbarMoreMenuItemOver { background-color: #fff1a8; } .actionToolbarMoreMenuItemDisabled { color: #999999; background-color: #CCCCCC; }
In order to hide an Item, CSS display:none property is used.
Side question: is there a better solution to dynamically hiding certain MenuItems?
SmartClient Version: v11.1p_2018-03-09/Pro Deployment (built 2018-03-09)
Chrome v. 64.0.3282.186
Comment