diff --git a/common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json b/common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json
new file mode 100644
index 00000000000000..6207afae72398e
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json
@@ -0,0 +1,11 @@
+{
+ "changes": [
+ {
+ "packageName": "office-ui-fabric-react",
+ "comment": "Prevent SelectionZone from interfering with links and buttons",
+ "type": "patch"
+ }
+ ],
+ "packageName": "office-ui-fabric-react",
+ "email": "tmichon@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx
index 1359126a4b178d..ad7dbb40be1165 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx
@@ -128,6 +128,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
selectionMode={ selectionMode }
constrainMode={ constrainMode }
groupProps={ groupProps }
+ enterModalSelectionOnTouch={ true }
onItemInvoked={ this._onItemInvoked }
onItemContextMenu={ this._onItemContextMenu }
ariaLabelForListHeader='Column headers. Use menus to perform column operations like sort and filter'
@@ -602,7 +603,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
} else if (column.key === 'key') {
column.columnActionsMode = ColumnActionsMode.disabled;
column.onRender = (item) => (
- { item.key }
+ { item.key }
);
column.minWidth = 90;
column.maxWidth = 90;
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
index 1e95a600e1e7ce..f9ff08cfc0df97 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
@@ -196,6 +196,8 @@ export class SelectionZone extends BaseComponent {
} else if (target === itemRoot && !this._isShiftPressed && !this._isCtrlPressed) {
this._onInvokeMouseDown(ev, this._getItemIndex(itemRoot));
break;
+ } else if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT') {
+ return;
}
}
@@ -238,6 +240,8 @@ export class SelectionZone extends BaseComponent {
} else if (target === itemRoot) {
this._onItemSurfaceClick(ev, index);
break;
+ } else if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT') {
+ return;
}
}