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