diff --git a/common/changes/office-ui-fabric-react/jspurlin-FocusZoneAddStopFocusPropagation_2018-05-09-12-17.json b/common/changes/office-ui-fabric-react/jspurlin-FocusZoneAddStopFocusPropagation_2018-05-09-12-17.json new file mode 100644 index 00000000000000..6fe4736b0960e8 --- /dev/null +++ b/common/changes/office-ui-fabric-react/jspurlin-FocusZoneAddStopFocusPropagation_2018-05-09-12-17.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "FocusZone: Add a prop to allow a FocusZone to not let focus events propagate outside of the FocusZone", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jspurlin@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx index ede76728ed76be..56a515e974b11c 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -210,7 +210,7 @@ export class FocusZone extends BaseComponent implements IFo } private _onFocus = (ev: React.FocusEvent): void => { - const { onActiveElementChanged } = this.props; + const { onActiveElementChanged, doNotAllowFocusEventToPropagate } = this.props; if (this._isImmediateDescendantOfZone(ev.target as HTMLElement)) { this._activeElement = ev.target as HTMLElement; @@ -226,9 +226,14 @@ export class FocusZone extends BaseComponent implements IFo parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement; } } + if (onActiveElementChanged) { onActiveElementChanged(this._activeElement as HTMLElement, ev); } + + if (doNotAllowFocusEventToPropagate) { + ev.stopPropagation(); + } } /** diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts index 0dc97c0307d821..06839a8481c883 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts @@ -133,6 +133,11 @@ export interface IFocusZoneProps extends React.HTMLAttributes