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

Author: nielslyngsoe

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();
       }
     }

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);