fix selectable mixin so it only selects when the right element is cli…

…cked
umbraco · Nov 20, 2024 · c5bf804 · c5bf804
1 parent 8f781ce
commit c5bf804
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -112,7 +112,11 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
     }
 
     private _handleClick(e: Event) {
-      if (e.composedPath().indexOf(this.selectableTarget) !== -1) {
+      const composePath = e.composedPath();
+      if (
+        (this._selectable || (this.deselectable && this.selected)) &&
+        composePath.indexOf(this.selectableTarget) === 0
+      ) {
         this._toggleSelect();
       }
     }

diff --git a/packages/uui-card-media/lib/uui-card-media.test.ts b/packages/uui-card-media/lib/uui-card-media.test.ts
@@ -99,6 +99,22 @@ describe('UUICardMediaElement', () => {
         expect(event.type).to.equal(UUISelectableEvent.SELECTED);
         expect(element.selected).to.be.true;
       });
+      it('do react to a click event on performed in this way', async () => {
+        element.selectable = true;
+        await elementUpdated(element);
+        element.click();
+        await Promise.resolve();
+        expect(element.selected).to.be.true;
+      });
+      it('do not react to a click event on other parts', async () => {
+        element.selectable = true;
+        await elementUpdated(element);
+        element
+          .shadowRoot!.querySelector<HTMLAnchorElement>('#open-part')!
+          .click();
+        await Promise.resolve();
+        expect(element.selected).to.be.false;
+      });
       it('can be selected with keyboard', async () => {
         element.selectable = true;
         await elementUpdated(element);