Disabled button can emit click events

[tomivirkki]

Description

A <vaadin-button> marked as disabled can still emit click events if you cancel its pointer-events: none CSS rule.

Expected outcome

A disabled button should not emit click events

Minimal reproducible example

<script type="module">
  const button = document.querySelector('vaadin-button');
  button.style.pointerEvents = 'auto';
  button.addEventListener('click', () => {
    console.log('Button clicked');
  });

  // Dynamically import the button to make sure the fix also works in cases
  // where the event listener is added before the web component is defined.
  import('@vaadin/button');
</script>

<vaadin-button disabled>Edit</vaadin-button>

Steps to reproduce

• Open the page with the provided snippet
• Click the disabled button
• See the logs

Environment

Vaadin version(s): All

Browsers

Issue is not browser related

[web-padawan]

make sure the fix also works in cases where the event listener is added before the web component is defined.

I think we can make it work using capture phase, but then custom event listener can also use it and still run earlier 🤷‍♂️

[web-padawan]

Note: according to https://github.com/vaadin/flow-components/issues/6183#issuecomment-2046669479, some people expect to be able to listen for clicks on disabled buttons. If we fix this issue, then the linked BFP would be affected.

[rolfsmeds]

Arguably, if you're modifying the default CSS of the button in a way that, by definition, affects its behavior, the change in behavior is your choice. So I don't see this as a bug since it works as intended unless you mess with it.

[tomivirkki]

On the current main, disabled buttons won't emit click events, even with pointer-events: auto Fixed by https://github.com/vaadin/web-components/pull/8541