diff --git a/common/changes/office-ui-fabric-react/jspurlin-FocusTrapZoneAddKeyDownHandler_2018-04-07-01-29.json b/common/changes/office-ui-fabric-react/jspurlin-FocusTrapZoneAddKeyDownHandler_2018-04-07-01-29.json new file mode 100644 index 00000000000000..a9371c212df0c8 --- /dev/null +++ b/common/changes/office-ui-fabric-react/jspurlin-FocusTrapZoneAddKeyDownHandler_2018-04-07-01-29.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "FocusTrapZone: Add KeyDown callback (in line with 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/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx index eb4710d22809e1..3319557f02d336 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx @@ -121,6 +121,15 @@ export class FocusTrapZone extends BaseComponent implem } private _onKeyboardHandler = (ev: React.KeyboardEvent): void => { + if (this.props.onKeyDown) { + this.props.onKeyDown(ev); + } + + // If the default has been prevented, do not process keyboard events. + if (ev.isDefaultPrevented()) { + return; + } + if (ev.which !== KeyCodes.tab) { return; } diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts index 4c9037b08a054b..5ef3c478173da5 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts @@ -53,4 +53,9 @@ export interface IFocusTrapZoneProps extends React.HTMLAttributes) => void; }