Merge branch 'v1/bugfix/selectableMixin-only-be-selective-when-selectabletarget-is-this' of https://github.com/umbraco/Umbraco.UI into v1/bugfix/selectableMixin-only-be-selective-when-selectabletarget-is-this

Author: madsrasmussen

packages/uui-base/lib/mixins/SelectableMixin.ts

@@ -115,7 +115,26 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
 
       if (isSelectable === false) return;
 
-      if (e.composedPath().indexOf(this.#selectableTarget) !== -1) {
+      const composePath = e.composedPath();
+
+      if (this.#selectableTarget === this) {
+        // the selectableTarget is not specified which means we need to be selective about what we accept events from.
+        const isActionTag = composePath.some(el => {
+          const elementTagName = (el as HTMLElement).tagName;
+          return (
+            elementTagName === 'A' ||
+            elementTagName === 'BUTTON' ||
+            elementTagName === 'INPUT' ||
+            elementTagName === 'TEXTAREA' ||
+            elementTagName === 'SELECT'
+          );
+        });
+
+        // never select when clicking on a link or button
+        if (isActionTag) return;
+      }
+
+      if (composePath.indexOf(this.#selectableTarget) !== -1) {
         if (e.type === 'keydown') {
           e.preventDefault(); // Do not want the space key to trigger a page scroll.
         }

packages/uui-card-media/lib/uui-card-media.element.ts

@@ -94,8 +94,7 @@ export class UUICardMediaElement extends UUICardElement {
             ifDefined(
               this.target === '_blank' ? 'noopener noreferrer' : undefined,
             ),
-        )}
-        @click=${(e: MouseEvent) => e.stopPropagation()}>
+        )}>
         ${this.#renderContent()}
       </a>
     `;
@@ -121,9 +120,7 @@ export class UUICardMediaElement extends UUICardElement {
       <div id="select-border"></div>
 
       <slot name="tag"></slot>
-      <slot
-        name="actions"
-        @click=${(e: MouseEvent) => e.stopPropagation()}></slot>`;
+      <slot name="actions"></slot>`;
   }
 
   static styles = [

packages/uui-ref-node/lib/uui-ref-node.story.ts

@@ -16,7 +16,6 @@ const meta: Meta = {
   args: {
     name: 'Rabbit Suit Product Page',
     detail: 'path/to/nowhere',
-    href: 'umbraco.com',
   },
   render: args =>
     html`<uui-ref-node ${spread(args)}>${renderSlots(args)}</uui-ref-node>`,
@@ -56,6 +55,13 @@ export const Standalone: Story = {
   },
 };
 
+export const Href: Story = {
+  args: {
+    href: 'https://umbraco.com',
+    target: '_blank',
+  },
+};
+
 export const Selectable: Story = {
   args: {
     selectable: true,

packages/uui-table/lib/uui-table-row.element.ts

@@ -6,8 +6,6 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
 
-import { UUITableCellElement } from './uui-table-cell.element';
-
 /**
  *  Table row element with option to set is as selectable. Parent for uui-table-cell. Must be a child of uui-table.
  *  @element uui-table-row
@@ -50,13 +48,15 @@ export class UUITableRowElement extends SelectOnlyMixin(
   private slotCellNodes?: unknown[];
 
   protected updated(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has('selectOnly')) this.updateChildSelectOnly();
+    if (changedProperties.has('selectOnly')) {
+      this.updateChildSelectOnly();
+    }
   }
 
   private updateChildSelectOnly() {
     if (this.slotCellNodes) {
-      this.slotCellNodes.forEach(el => {
-        if (el instanceof UUITableCellElement) {
+      this.slotCellNodes.forEach((el: any) => {
+        if (el.disableChildInteraction !== undefined) {
           el.disableChildInteraction = this.selectOnly;
         }
       });

packages/uui-table/lib/uui-table-row.story.ts

@@ -4,6 +4,10 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { ArrayOfUmbracoWords } from '../../../storyhelpers/UmbracoWordGenerator';
 
+import '@umbraco-ui/uui-table';
+import '@umbraco-ui/uui-input';
+import '@umbraco-ui/uui-button';
+
 const meta: Meta = {
   id: 'uui-table-row',
   component: 'uui-table-row',
@@ -12,18 +16,24 @@ const meta: Meta = {
     <uui-table>
       <uui-table-row
         ?selectable=${args.selectable}
-        ?selectOnly=${args.selectOnly}>
+        ?select-only=${args.selectOnly}>
         ${ArrayOfUmbracoWords(5).map(
           el => html`<uui-table-cell>${el}</uui-table-cell>`,
         )}
       </uui-table-row>
       <uui-table-row
         ?selectable=${args.selectable}
-        ?selectOnly=${args.selectOnly}>
+        ?select-only=${args.selectOnly}>
         <uui-table-cell>
           <uui-input placeholder="Type your own thing"></uui-input>
         </uui-table-cell>
-        ${ArrayOfUmbracoWords(5).map(
+        <uui-table-cell>
+          <uui-button label="some button"></uui-button>
+        </uui-table-cell>
+        <uui-table-cell>
+          <a href="http://www.umbraco.com" target="_blank">Link</a>
+        </uui-table-cell>
+        ${ArrayOfUmbracoWords(3).map(
           el => html`<uui-table-cell>${el}</uui-table-cell>`,
         )}
       </uui-table-row>