Active state of disabled button is triggering when <i> or <b> inside a button is clicked.

[max41479]

• Operating system: Windows 7 SP1.
• Browser: Chrome v 60.0.3112.90, (64 bit)
• https://jsbin.com/vewexuviqi/1/edit?html,css,js,output - first 2 buttons is bugged, last one isn't.

<i>123</i>, <b>123</b> tags inside of <button type="button" class="btn btn-lg btn-outline-dark" disabled></button> tag causes triggering active state of button when button is clicked.
(<a>123</a> and maybe other tags causes this behavior too).
In Firefox 54.0.1 (32-bit), Microsoft Edge 38.14393.1066.0 and IE 11.0.9600.18762 all disabled buttons is triggering active state regardless of <i> or <b> tags.

[Johann-S]

I don't see any JavaScript issue here @patrickhlauke 🤔 for me it's a CSS issue, correct me if I missed something

[patrickhlauke]

oops correct, got confused thinking this was some dynamically added class, when in fact it's that the :active class is, well, still active even when the disabled class is there

[prateekgoel]

@patrickhlauke @Johann-S I would like to fix this. Can I start working on this?

[Johann-S]

Sure @prateekgoel go ahead 👍

[prateekgoel]

Thanks @Johann-S . I will submit the PR soon.

[prateekgoel]

@Johann-S @patrickhlauke
Even when there's no <b> or <i> tag inside button, the active state is triggered. This can be reproduced in Mozilla Firefox browser.
So I think the solution would be to apply the styles same as .disabled to .disabled:active as well.
Let me know your views then I'll work accordingly.

/CC @mdo

[patrickhlauke]

sounds like the right approach...in essence, making sure :active is neutralized for all .disabled links, regardless of any extra modifiers.

[prateekgoel]

Yes sure @patrickhlauke

[mdo]

We've been over this a few times in the last couple years I realized, but should we just pointer-events: none the button? That'd nullify tooltips and popovers on the buttons, but that's easily rectified with a wrapping element. Thoughts?

[patrickhlauke]

the danger here is that a "real" disabled control, at least to my knowledge (no time to check, but makes sense conceptually) still "swallows" any clicks. if we just used pointer-events:none, we'd make it transparent with regards to clicks etc, which in turn would create potentially unforeseen consequences (if the parent on the disabled control has its own handlers, or if there's event delegation in play)

[prateekgoel]

@mdo @patrickhlauke So shall we use both?

[patrickhlauke]

sorry, late reply, but I'd say let's stay away from the pointer-events: none part for now, and just concentrate on explicitly making sure that :active.disabled is neutralized.

[prateekgoel]

@patrickhlauke So i guess the PR submitted should work.

[patrickhlauke]

@prateekgoel yup, was looking at the PR there and I think it's good (but see question)

[prateekgoel]

@patrickhlauke Yes I saw the question. I am not sure if any disabled element receives the .active class.

[patrickhlauke]

sorry was having trouble with local build tools so couldn't test this. back in action and will see if i can take this PR for a test drive later tonight