Fix clickhandlers

gallery/src/ha-gallery.js

@@ -187,6 +187,18 @@ class HaGallery extends PolymerElement {
       })
     );
 
+    this.addEventListener("chip-clicked", () =>
+      this.$.notifications.showDialog({
+        message: "Chip clicked",
+      })
+    );
+
+    this.addEventListener("chip-clicked-trailing", () =>
+      this.$.notifications.showDialog({
+        message: "Chip trailing icon clicked",
+      })
+    );
+
     this.addEventListener("hass-more-info", (ev) => {
       if (ev.detail.entityId) {
         this.$.notifications.showDialog({

src/components/ha-chip-set.ts

@@ -9,16 +9,8 @@ import {
   unsafeCSS,
 } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
 import "./ha-chip";
 
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "chip-clicked": { index: string };
-  }
-}
-
 export interface HaChipSetItem {
   label?: string;
   leadingIcon?: string;
@@ -38,7 +30,6 @@ export class HaChipSet extends LitElement {
               (item, idx) =>
                 html`
                   <ha-chip
-                    @click=${this._handleClick}
                     .index=${idx}
                     .label=${item.label}
                     .leadingIcon=${item.leadingIcon}
@@ -53,12 +44,6 @@ export class HaChipSet extends LitElement {
     `;
   }
 
-  private _handleClick(ev): void {
-    fireEvent(this, "chip-clicked", {
-      index: ev.currentTarget.index,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}

src/components/ha-chip.ts

@@ -9,6 +9,15 @@ import {
   unsafeCSS,
 } from "lit";
 import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "chip-clicked": undefined;
+    "chip-clicked-trailing": undefined;
+  }
+}
 
 @customElement("ha-chip")
 export class HaChip extends LitElement {
@@ -22,7 +31,10 @@ export class HaChip extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="mdc-chip ${this.outlined ? "outlined" : ""}">
+      <div
+        class="mdc-chip ${this.outlined ? "outlined" : ""}"
+        @click=${this._handleClick}
+      >
         ${this.leadingIcon
           ? html`<span role="gridcell">
               <span role="button" tabindex="0" class="mdc-chip__primary-action"
@@ -35,7 +47,7 @@ export class HaChip extends LitElement {
           : ""}
         <div class="mdc-chip__ripple"></div>
         <span role="gridcell">
-          <span role="button" tabindex="0" class="mdc-chip__primary-action">
+          <span role="row" tabindex="0" class="mdc-chip__primary-action">
             <span class="mdc-chip__text">
               ${this.label || html`<slot></slot>`}
             </span>
@@ -45,6 +57,7 @@ export class HaChip extends LitElement {
           <span role="button" tabindex="-1" class="mdc-chip__primary-action">
             ${this.trailingIcon
               ? html`<ha-svg-icon
+                  @click=${this._handleTrailingClick}
                   class="mdc-chip__icon mdc-chip__icon--trailing"
                   .path=${this.trailingIcon}
                 >
@@ -56,6 +69,15 @@ export class HaChip extends LitElement {
     `;
   }
 
+  private _handleClick(): void {
+    fireEvent(this, "chip-clicked");
+  }
+
+  private _handleTrailingClick(ev: Event): void {
+    ev.stopPropagation();
+    fireEvent(this, "chip-clicked-trailing");
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}