Enterprise: popup-menu: li.is-disabled has highlighted background when with .is-selected

Created on 11 Oct 2018 · 4Comments · Source: infor-design/enterprise

Describe the bug
In the popup menu, when I have some entries disabled, after I move the mouse over them and take it away they get the .is-selected background color, giving the feel that they are selectable.

To Reproduce
Steps to reproduce the behavior:

Have a dropdown menu with disabled options
Move the mouse over the option
Slide the cursor of the mouse "horizontally" till it is out of the menu
The entry get "selected" even if it's not enabled or with the mouse over it.

Expected behavior
The class .is-disabled should prevent .is-selected from changing the background of the item. It is curious that .is-disabled:hover behaves correctly, but when the :hover is off then get the highlight.

A solution could be to add "background-color: transparent" to .is-disabled.is-selected

Screenshots

Platform

OS Version: Windows 10
Browser: Chrome

Additional context
Add any other context about the problem here.

[1] type

Source

dubde

Most helpful comment

Hi @brianjuan you can check it here:

not working: https://4110-enterprise.demo.design.infor.com/components/popupmenu/example-disabled-submenus.html

working: https://4140-beta0-enterprise.demo.design.infor.com/components/popupmenu/example-disabled-submenus.html

dubde on 17 Dec 2018

👍3

All 4 comments

For the moment, I solved it locally by putting in global styles.css

.popupmenu li.is-focused.is-disabled,
 .popupmenu li.is-focused.disabled {
  background-color: transparent;
}

dubde on 4 Dec 2018

Hi @tmcconechy , where can we test the fix? /components/menubutton/test-disabled.html is not found on localhost and https://4140-beta0-enterprise.demo.design.infor.com/components/list