[infinispan-issues] [JBoss JIRA] (ISPN-6747) Disabled buttons in dropdown menus are still functional

[Jiří Holuša (JIRA)]

     [ https://issues.jboss.org/browse/ISPN-6747?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Jiří Holuša updated ISPN-6747:
------------------------------
    Description: 
For example, on cache detail page, in "Actions" dropdown menu, if cache is enabled than the "Enable" option is disabled. Currently, the button is grey, but when you try clicking on it, it will execute the operation anyway. Please note that this affects every button in the dropdown menus, more specifically every <a> link, because you cannot use disabled="disabled" (therefore ng-disabled) on the <a> link as you do with the <button> elements.

I found a root cause and also a fix, however, I wasn't able to find a place, where to modify the CSS style, since the hierarchy is quite complicated. To fix the issue, you have to add
{code}
li.disabled {
  cursor: not-allowed;
}
{code}
to the CSS of the directly encapsulating <li>, and following 
{code}
li.disabled a {
  pointer-events: none;
}
{code}
to the CSS of the disabled <a> tag. The reason to split this two is that the cursor and pointer-events don't work well together and we want to have both "not-allowed" cursor and not-clickable link. See https://github.com/twbs/bootstrap/issues/16088 for details.

I would be happy to implement the fix and send a PR, just give me a hint which one is the CSS style to be modified. I essentially need to modify the CSS on the URL http://localhost:9990/console/built_components/patternfly/dist/css/patternfly.css . Or should it be overwritten somewhere else?
I've tested the fix via modifying the CSS directly in the browser on the fly, so I can confirm that it works.

  was:
For example, on cache detail page, in "Actions" dropdown menu, if cache is enabled than the "Enable" option is disabled. Currently, the button is grey, but when you try clicking on it, it will execute the operation anyway. Please note that this affects every button in the dropdown menus, more specifically every <a> link, because you cannot use disabled="disabled" (therefore ng-disabled) on the <a> link as you do with the <button> elements.

I found a root cause and also a fix, however, I wasn't able to find a place, where to modify the CSS style, since the hierarchy is quite complicated. To fix the issue, you have to add
{code}
li.disabled {
  cursor: not-allowed;
}
{code}
to the CSS of the directly encapsulating <li>, and following 
{code}
li.disabled a {
  pointer-events: none;
}
{code}
to the CSS of the disabled <a> tag. The reason to split this two is that the cursor and pointer-events don't work well together and we want to have both "not-allowed" cursor and not-clickable link. See https://github.com/twbs/bootstrap/issues/16088 for details.

I would be happy to implement the fix and send a PR, just give me a hint which one is the CSS style to be modified. I essentially need to modify the CSS on the URL http://localhost:9990/console/built_components/patternfly/dist/css/patternfly.css . Or should it be overwritten somewhere else?



> Disabled buttons in dropdown menus are still functional
> -------------------------------------------------------
>
>                 Key: ISPN-6747
>                 URL: https://issues.jboss.org/browse/ISPN-6747
>             Project: Infinispan
>          Issue Type: Bug
>          Components: Console
>    Affects Versions: 8.2.2.Final
>            Reporter: Jiří Holuša
>            Assignee: Vladimir Blagojevic
>
> For example, on cache detail page, in "Actions" dropdown menu, if cache is enabled than the "Enable" option is disabled. Currently, the button is grey, but when you try clicking on it, it will execute the operation anyway. Please note that this affects every button in the dropdown menus, more specifically every <a> link, because you cannot use disabled="disabled" (therefore ng-disabled) on the <a> link as you do with the <button> elements.
> I found a root cause and also a fix, however, I wasn't able to find a place, where to modify the CSS style, since the hierarchy is quite complicated. To fix the issue, you have to add
> {code}
> li.disabled {
>   cursor: not-allowed;
> }
> {code}
> to the CSS of the directly encapsulating <li>, and following 
> {code}
> li.disabled a {
>   pointer-events: none;
> }
> {code}
> to the CSS of the disabled <a> tag. The reason to split this two is that the cursor and pointer-events don't work well together and we want to have both "not-allowed" cursor and not-clickable link. See https://github.com/twbs/bootstrap/issues/16088 for details.
> I would be happy to implement the fix and send a PR, just give me a hint which one is the CSS style to be modified. I essentially need to modify the CSS on the URL http://localhost:9990/console/built_components/patternfly/dist/css/patternfly.css . Or should it be overwritten somewhere else?
> I've tested the fix via modifying the CSS directly in the browser on the fly, so I can confirm that it works.



--
This message was sent by Atlassian JIRA
(v6.4.11#64026)