Skip to content

Prevent SelectionZone from interfering with nested links and buttons #4544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ThomasMichon merged 3 commits into from
Apr 15, 2018
Merged

Prevent SelectionZone from interfering with nested links and buttons #4544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4906bdb
Prevent SelectionZone from clobbering interactive sub-elements
ThomasMichon Apr 13, 2018
3208f38
Add modal selection to DetailsList Advanced example
ThomasMichon Apr 13, 2018
1c13222
Update change output
ThomasMichon Apr 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
3 changes: 2 additions & 1 deletion ...fice-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -602,7 +603,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
} else if (column.key === 'key') {
column.columnActionsMode = ColumnActionsMode.disabled;
column.onRender = (item) => (
<Link href='#'>{ item.key }</Link>
<Link href='https://microsoft.com' target='_blank' rel='noopener'>{ item.key }</Link>
);
column.minWidth = 90;
column.maxWidth = 90;
Expand Down
4 changes: 4 additions & 0 deletions packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,8 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
} 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;
}
}

Expand Down Expand Up @@ -238,6 +240,8 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
} else if (target === itemRoot) {
this._onItemSurfaceClick(ev, index);
break;
} else if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT') {
return;
}
}

Expand Down