Removed click event when dropdown item is disabled (#2023)

* removed click event when disabled is true

* updated changelog

* updated code

Author: kelseythejackson

packages/webawesome/docs/docs/resources/changelog.md

@@ -12,6 +12,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 <small>TBD</small>
 
+- Fixed a bug in `<wa-dropdown-item>` where a click event would fire on `disabled`. [pr:2023]
 - Added `wa-button` class for styling `<a>` elements as buttons [pr:2040]
 - Fixed a bug in the custom elements manifest where events may not have a name. [pr:2026]
 - Fixed a bug in `<wa-select>` where options with `selected` set via framework property binding (e.g., Vue's `:selected`) were not respected when `with-clear` was present [pr:1985] 

packages/webawesome/src/components/dropdown-item/dropdown-item.styles.ts

@@ -28,9 +28,11 @@ export default css`
     background-color: var(--wa-color-neutral-fill-normal);
   }
 
-  :host(:state(disabled)) {
+  :host(:state(disabled)),
+  :host([disabled]) {
     opacity: 0.5;
     cursor: not-allowed;
+    pointer-events: none;
   }
 
   /* Danger variant */

packages/webawesome/src/components/dropdown-item/dropdown-item.test.ts

@@ -1,9 +1,30 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import { clickOnElement } from '../../internal/test/pointer-utilities.js';
+import type WaDropdownItem from './dropdown-item.js';
 
 describe('<wa-dropdown-item>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <wa-dropdown-item></wa-dropdown-item> `);
 
     expect(el).to.exist;
   });
+
+  it('should not fire click event when disabled', async () => {
+    const el = await fixture<WaDropdownItem>(html` <wa-dropdown-item disabled>Item</wa-dropdown-item> `);
+    await el.updateComplete;
+
+    const clickHandler = sinon.spy();
+    el.addEventListener('click', clickHandler);
+    await clickOnElement(el);
+    expect(clickHandler).not.to.have.been.called;
+  });
+
+  it('should fire click event when not disabled', async () => {
+    const el = await fixture<WaDropdownItem>(html` <wa-dropdown-item>Item</wa-dropdown-item> `);
+    const clickHandler = sinon.spy();
+    el.addEventListener('click', clickHandler);
+    await clickOnElement(el);
+    expect(clickHandler).to.have.been.calledOnce;
+  });
 });

packages/webawesome/src/components/dropdown-item/dropdown-item.ts

@@ -85,13 +85,15 @@ export default class WaDropdownItem extends WebAwesomeElement {
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+    this.shadowRoot!.addEventListener('click', this.handleClick, { capture: true });
     this.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.closeSubmenu();
     this.removeEventListener('mouseenter', this.handleMouseEnter);
+    this.shadowRoot!.removeEventListener('click', this.handleClick, { capture: true });
     this.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);
   }
 
@@ -115,6 +117,7 @@ export default class WaDropdownItem extends WebAwesomeElement {
     if (changedProperties.has('disabled')) {
       this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
       this.customStates.set('disabled', this.disabled);
+      this.style.pointerEvents = this.disabled ? 'none' : '';
     }
 
     if (changedProperties.has('type')) {
@@ -236,6 +239,14 @@ export default class WaDropdownItem extends WebAwesomeElement {
     ) as WaDropdownItem[];
   }
 
+  /** Prevents click events from firing when the item is disabled. */
+  private handleClick = (event: MouseEvent) => {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+
   /** Handles mouse enter to open the submenu */
   private handleMouseEnter() {
     if (this.hasSubmenu && !this.disabled) {