From 9efa1f3faa9bfe06bff78fe6b14ee4985b050169 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Tue, 20 Feb 2018 12:53:22 -0800 Subject: [PATCH 01/18] added return for focus zone when focus change fail --- .../src/components/FocusZone/FocusZone.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) 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 1952a0b5df70bc..33e8e6ae7a66fc 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -358,19 +358,17 @@ export class FocusZone extends BaseComponent implements IFo case KeyCodes.tab: if (this.props.allowTabKey) { if (direction === FocusZoneDirection.vertical) { - if (ev.shiftKey) { - this._moveFocusUp(); - } else { - this._moveFocusDown(); + let focusChanged = ev.shiftKey ? this._moveFocusUp() : this._moveFocusDown(); + if (focusChanged) { + break; } - break; + return; } else if (direction === FocusZoneDirection.horizontal || direction === FocusZoneDirection.bidirectional) { - if (ev.shiftKey) { - this._moveFocusLeft(); - } else { - this._moveFocusRight(); + let focusChanged = ev.shiftKey ? this._moveFocusLeft() : this._moveFocusRight(); + if (focusChanged) { + break; } - break; + return; } } return; From 65d118b13afcdeee7027841e848ef6d1fd5955ae Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 21 Feb 2018 10:13:54 -0800 Subject: [PATCH 02/18] add tab override for focus zone --- .../src/components/FocusZone/FocusZone.tsx | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) 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 33e8e6ae7a66fc..1ae5916b33b9df 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -358,13 +358,13 @@ export class FocusZone extends BaseComponent implements IFo case KeyCodes.tab: if (this.props.allowTabKey) { if (direction === FocusZoneDirection.vertical) { - let focusChanged = ev.shiftKey ? this._moveFocusUp() : this._moveFocusDown(); + let focusChanged = ev.shiftKey ? this._moveFocusUp(true) : this._moveFocusDown(true); if (focusChanged) { break; } return; } else if (direction === FocusZoneDirection.horizontal || direction === FocusZoneDirection.bidirectional) { - let focusChanged = ev.shiftKey ? this._moveFocusLeft() : this._moveFocusRight(); + let focusChanged = ev.shiftKey ? this._moveFocusLeft(true) : this._moveFocusRight(true); if (focusChanged) { break; } @@ -471,6 +471,7 @@ export class FocusZone extends BaseComponent implements IFo private _moveFocus( isForward: boolean, + isTab: boolean, getDistanceFromCenter: (activeRect: ClientRect, targetRect: ClientRect) => number, ev?: Event): boolean { @@ -485,7 +486,7 @@ export class FocusZone extends BaseComponent implements IFo } if (this._isElementInput(element)) { - if (!this._shouldInputLoseFocus(element as HTMLInputElement, isForward)) { + if (!this._shouldInputLoseFocus(element as HTMLInputElement, isForward, isTab)) { return false; } } @@ -538,11 +539,11 @@ export class FocusZone extends BaseComponent implements IFo return changedFocus; } - private _moveFocusDown(): boolean { + private _moveFocusDown(isTab = false): boolean { let targetTop = -1; const leftAlignment = this._focusAlignment.left; - if (this._moveFocus(true, (activeRect: ClientRect, targetRect: ClientRect) => { + if (this._moveFocus(true, isTab, (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; // ClientRect values can be floats that differ by very small fractions of a decimal. // If the difference between top and bottom are within a pixel then we should treat @@ -574,11 +575,11 @@ export class FocusZone extends BaseComponent implements IFo return false; } - private _moveFocusUp(): boolean { + private _moveFocusUp(isTab = false): boolean { let targetTop = -1; const leftAlignment = this._focusAlignment.left; - if (this._moveFocus(false, (activeRect: ClientRect, targetRect: ClientRect) => { + if (this._moveFocus(false, isTab, (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; // ClientRect values can be floats that differ by very small fractions of a decimal. // If the difference between top and bottom are within a pixel then we should treat @@ -611,8 +612,8 @@ export class FocusZone extends BaseComponent implements IFo return false; } - private _moveFocusLeft(): boolean { - if (this._moveFocus(getRTL(), (activeRect: ClientRect, targetRect: ClientRect) => { + private _moveFocusLeft(isTab = false): boolean { + if (this._moveFocus(getRTL(), isTab, (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; if ( @@ -633,8 +634,8 @@ export class FocusZone extends BaseComponent implements IFo return false; } - private _moveFocusRight(): boolean { - if (this._moveFocus(!getRTL(), (activeRect: ClientRect, targetRect: ClientRect) => { + private _moveFocusRight(isTab = false): boolean { + if (this._moveFocus(!getRTL(), isTab, (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; if ( @@ -758,7 +759,7 @@ export class FocusZone extends BaseComponent implements IFo return false; } - private _shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean) { + private _shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean, isTab?: boolean) { if (element && element.type && ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) { @@ -771,9 +772,9 @@ export class FocusZone extends BaseComponent implements IFo // 1. There is range selected. // 2. When selection start is larger than 0 and it is backward. // 3. when selection start is not the end of lenght and it is forward. - if (isRangeSelected || + if (!isTab && (isRangeSelected || (selectionStart > 0 && !isForward) || - (selectionStart !== inputValue.length && isForward)) { + (selectionStart !== inputValue.length && isForward))) { return false; } } From 06282e15c860de26efccd7247b7af17bfcb6f080 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 21 Feb 2018 11:28:10 -0800 Subject: [PATCH 03/18] added support for skipping selection with tab --- .../src/components/FocusZone/FocusZone.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 1ae5916b33b9df..a3c19a6f4b8649 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -376,7 +376,7 @@ export class FocusZone extends BaseComponent implements IFo case KeyCodes.home: if ( this._isElementInput(ev.target as HTMLElement) && - !this._shouldInputLoseFocus(ev.target as HTMLInputElement, false)) { + !this._shouldInputLoseFocus(ev.target as HTMLInputElement, false, false)) { return false; } const firstChild = this._root.firstChild as HTMLElement; @@ -388,7 +388,7 @@ export class FocusZone extends BaseComponent implements IFo case KeyCodes.end: if ( this._isElementInput(ev.target as HTMLElement) && - !this._shouldInputLoseFocus(ev.target as HTMLInputElement, true)) { + !this._shouldInputLoseFocus(ev.target as HTMLInputElement, true, false)) { return false; } From 29ca03612347fb271b6beb9f99ba274da310c586 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 21 Feb 2018 13:01:19 -0800 Subject: [PATCH 04/18] add change files --- .../focuszone-tabfix_2018-02-21-20-59.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/focuszone-tabfix_2018-02-21-20-59.json diff --git a/common/changes/office-ui-fabric-react/focuszone-tabfix_2018-02-21-20-59.json b/common/changes/office-ui-fabric-react/focuszone-tabfix_2018-02-21-20-59.json new file mode 100644 index 00000000000000..2c4eb17bffdafd --- /dev/null +++ b/common/changes/office-ui-fabric-react/focuszone-tabfix_2018-02-21-20-59.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Focus Zone: Add support for tab to skip selection elements", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "chiechan@microsoft.com" +} \ No newline at end of file From e493f6606e8d30b06825c8c9ea7aac9ec6536958 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 21 Feb 2018 14:04:52 -0800 Subject: [PATCH 05/18] added tabbable focus zone example --- .../components/FocusZone/FocusZonePage.tsx | 5 +++++ .../examples/FocusZone.Tabbable.Example.tsx | 22 +++++++++++++++++++ .../FocusZone.Tabbable.Exampletsx.tsx | 22 +++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx create mode 100644 packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Exampletsx.tsx diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx index 2c7608aab2f501..96de5431e78744 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx @@ -8,10 +8,12 @@ import { import { FocusZonePhotosExample } from './examples/FocusZone.Photos.Example'; import { FocusZoneListExample } from './examples/FocusZone.List.Example'; import { FocusZoneDisabledExample } from './examples/FocusZone.Disabled.Example'; +import { FocusZoneTabbableExample } from './examples/FocusZone.Tabbable.Example' const FocusZonePhotosExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx') as string; const FocusZoneListExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx') as string; const FocusZoneDisabledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx') as string; +const FocusZoneTabbableCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx') as string; export class FocusZonePage extends React.Component { public render() { @@ -30,6 +32,9 @@ export class FocusZonePage extends React.Component + + + } propertiesTables={ diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx new file mode 100644 index 00000000000000..0b217165f53bac --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx @@ -0,0 +1,22 @@ +/* tslint:disable:no-unused-variable */ +import * as React from 'react'; +/* tslint:enable:no-unused-variable */ + +import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; +import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; +import { TextField } from 'office-ui-fabric-react/lib/TextField'; +import './FocusZone.Tabbable.Example.scss'; + +export const FocusZoneTabbableExample = () => ( +
+
+ + Circular Tabbable FocusZone: + Button 1 + Button 2 + + Button 3 + +
+
+); diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Exampletsx.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Exampletsx.tsx new file mode 100644 index 00000000000000..b5614ed0199bd8 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Exampletsx.tsx @@ -0,0 +1,22 @@ +/* tslint:disable:no-unused-variable */ +import * as React from 'react'; +/* tslint:enable:no-unused-variable */ + +import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; +import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; +import { TextField } from 'office-ui-fabric-react/lib/TextField'; +import './FocusZone.Disabled.Example.scss'; + +export const FocusZoneTabbableExample = () => ( +
+
+ + Enabled FocusZone: + Button 1 + Button 2 + + Button 3 + +
+
+); From 6726d5bd775b52b7f5a4a787a17047012a54a898 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 21 Feb 2018 14:18:40 -0800 Subject: [PATCH 06/18] got rid of unnecessary return --- .../src/components/FocusZone/FocusZone.tsx | 2 -- 1 file changed, 2 deletions(-) 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 a3c19a6f4b8649..84da6b673cae93 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -362,13 +362,11 @@ export class FocusZone extends BaseComponent implements IFo if (focusChanged) { break; } - return; } else if (direction === FocusZoneDirection.horizontal || direction === FocusZoneDirection.bidirectional) { let focusChanged = ev.shiftKey ? this._moveFocusLeft(true) : this._moveFocusRight(true); if (focusChanged) { break; } - return; } } return; From a2b3691228724f0d017e7970e2b3abfa47666f71 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 21 Feb 2018 15:36:02 -0800 Subject: [PATCH 07/18] used member instead of passing varaables down --- .../src/components/FocusZone/FocusZone.tsx | 50 ++++++++++--------- 1 file changed, 27 insertions(+), 23 deletions(-) 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 84da6b673cae93..e21c812647d2c1 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -58,6 +58,9 @@ export class FocusZone extends BaseComponent implements IFo private _focusAlignment: IPoint; private _isInnerZone: boolean; + /** Used to allow us to move to next focusable element even when we're focusing on a input element when pressing tab */ + private _tabPressActive: boolean; + constructor(props: IFocusZoneProps) { super(props); @@ -69,6 +72,8 @@ export class FocusZone extends BaseComponent implements IFo left: 0, top: 0 }; + + this._tabPressActive = false; } public componentDidMount() { @@ -357,16 +362,16 @@ export class FocusZone extends BaseComponent implements IFo case KeyCodes.tab: if (this.props.allowTabKey) { + let focusChanged = false; + this._tabPressActive = true; if (direction === FocusZoneDirection.vertical) { - let focusChanged = ev.shiftKey ? this._moveFocusUp(true) : this._moveFocusDown(true); - if (focusChanged) { - break; - } + focusChanged = ev.shiftKey ? this._moveFocusUp() : this._moveFocusDown(); } else if (direction === FocusZoneDirection.horizontal || direction === FocusZoneDirection.bidirectional) { - let focusChanged = ev.shiftKey ? this._moveFocusLeft(true) : this._moveFocusRight(true); - if (focusChanged) { - break; - } + focusChanged = ev.shiftKey ? this._moveFocusLeft() : this._moveFocusRight(); + } + this._tabPressActive = false; + if (focusChanged) { + break; } } return; @@ -374,7 +379,7 @@ export class FocusZone extends BaseComponent implements IFo case KeyCodes.home: if ( this._isElementInput(ev.target as HTMLElement) && - !this._shouldInputLoseFocus(ev.target as HTMLInputElement, false, false)) { + !this._shouldInputLoseFocus(ev.target as HTMLInputElement, false)) { return false; } const firstChild = this._root.firstChild as HTMLElement; @@ -386,7 +391,7 @@ export class FocusZone extends BaseComponent implements IFo case KeyCodes.end: if ( this._isElementInput(ev.target as HTMLElement) && - !this._shouldInputLoseFocus(ev.target as HTMLInputElement, true, false)) { + !this._shouldInputLoseFocus(ev.target as HTMLInputElement, true)) { return false; } @@ -469,7 +474,6 @@ export class FocusZone extends BaseComponent implements IFo private _moveFocus( isForward: boolean, - isTab: boolean, getDistanceFromCenter: (activeRect: ClientRect, targetRect: ClientRect) => number, ev?: Event): boolean { @@ -484,7 +488,7 @@ export class FocusZone extends BaseComponent implements IFo } if (this._isElementInput(element)) { - if (!this._shouldInputLoseFocus(element as HTMLInputElement, isForward, isTab)) { + if (!this._tabPressActive && !this._shouldInputLoseFocus(element as HTMLInputElement, isForward)) { return false; } } @@ -537,11 +541,11 @@ export class FocusZone extends BaseComponent implements IFo return changedFocus; } - private _moveFocusDown(isTab = false): boolean { + private _moveFocusDown(): boolean { let targetTop = -1; const leftAlignment = this._focusAlignment.left; - if (this._moveFocus(true, isTab, (activeRect: ClientRect, targetRect: ClientRect) => { + if (this._moveFocus(true, (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; // ClientRect values can be floats that differ by very small fractions of a decimal. // If the difference between top and bottom are within a pixel then we should treat @@ -573,11 +577,11 @@ export class FocusZone extends BaseComponent implements IFo return false; } - private _moveFocusUp(isTab = false): boolean { + private _moveFocusUp(): boolean { let targetTop = -1; const leftAlignment = this._focusAlignment.left; - if (this._moveFocus(false, isTab, (activeRect: ClientRect, targetRect: ClientRect) => { + if (this._moveFocus(false, (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; // ClientRect values can be floats that differ by very small fractions of a decimal. // If the difference between top and bottom are within a pixel then we should treat @@ -610,8 +614,8 @@ export class FocusZone extends BaseComponent implements IFo return false; } - private _moveFocusLeft(isTab = false): boolean { - if (this._moveFocus(getRTL(), isTab, (activeRect: ClientRect, targetRect: ClientRect) => { + private _moveFocusLeft(): boolean { + if (this._moveFocus(getRTL(), (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; if ( @@ -632,8 +636,8 @@ export class FocusZone extends BaseComponent implements IFo return false; } - private _moveFocusRight(isTab = false): boolean { - if (this._moveFocus(!getRTL(), isTab, (activeRect: ClientRect, targetRect: ClientRect) => { + private _moveFocusRight(): boolean { + if (this._moveFocus(!getRTL(), (activeRect: ClientRect, targetRect: ClientRect) => { let distance = -1; if ( @@ -757,7 +761,7 @@ export class FocusZone extends BaseComponent implements IFo return false; } - private _shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean, isTab?: boolean) { + private _shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean) { if (element && element.type && ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) { @@ -770,9 +774,9 @@ export class FocusZone extends BaseComponent implements IFo // 1. There is range selected. // 2. When selection start is larger than 0 and it is backward. // 3. when selection start is not the end of lenght and it is forward. - if (!isTab && (isRangeSelected || + if (isRangeSelected || (selectionStart > 0 && !isForward) || - (selectionStart !== inputValue.length && isForward))) { + (selectionStart !== inputValue.length && isForward)) { return false; } } From 3a53eb4394e63781601ba2768afde6073cfdf735 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 21 Feb 2018 15:57:59 -0800 Subject: [PATCH 08/18] changed tab field name; moved tab location --- .../src/components/FocusZone/FocusZone.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) 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 e21c812647d2c1..b09d6ba69d5700 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -59,7 +59,7 @@ export class FocusZone extends BaseComponent implements IFo private _isInnerZone: boolean; /** Used to allow us to move to next focusable element even when we're focusing on a input element when pressing tab */ - private _tabPressActive: boolean; + private _processingTabKey: boolean; constructor(props: IFocusZoneProps) { super(props); @@ -73,7 +73,7 @@ export class FocusZone extends BaseComponent implements IFo top: 0 }; - this._tabPressActive = false; + this._processingTabKey = false; } public componentDidMount() { @@ -363,13 +363,13 @@ export class FocusZone extends BaseComponent implements IFo case KeyCodes.tab: if (this.props.allowTabKey) { let focusChanged = false; - this._tabPressActive = true; + this._processingTabKey = true; if (direction === FocusZoneDirection.vertical) { focusChanged = ev.shiftKey ? this._moveFocusUp() : this._moveFocusDown(); } else if (direction === FocusZoneDirection.horizontal || direction === FocusZoneDirection.bidirectional) { focusChanged = ev.shiftKey ? this._moveFocusLeft() : this._moveFocusRight(); } - this._tabPressActive = false; + this._processingTabKey = false; if (focusChanged) { break; } @@ -488,7 +488,7 @@ export class FocusZone extends BaseComponent implements IFo } if (this._isElementInput(element)) { - if (!this._tabPressActive && !this._shouldInputLoseFocus(element as HTMLInputElement, isForward)) { + if (!this._shouldInputLoseFocus(element as HTMLInputElement, isForward)) { return false; } } @@ -762,7 +762,9 @@ export class FocusZone extends BaseComponent implements IFo } private _shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean) { - if (element && + // If a tab was used, we want to focus on the next element. + if (!this._processingTabKey && + element && element.type && ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) { let selectionStart = element.selectionStart; From 7b0413f563cfec7298bee8b4ad8129a4f4aa8990 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 21 Feb 2018 16:21:08 -0800 Subject: [PATCH 09/18] removed duplicate component; fixed lint problems --- .../components/FocusZone/FocusZonePage.tsx | 2 +- .../examples/FocusZone.Tabbable.Example.tsx | 2 +- .../FocusZone.Tabbable.Exampletsx.tsx | 22 ------------------- 3 files changed, 2 insertions(+), 24 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Exampletsx.tsx diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx index 96de5431e78744..a227aaafaaeb48 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx @@ -8,7 +8,7 @@ import { import { FocusZonePhotosExample } from './examples/FocusZone.Photos.Example'; import { FocusZoneListExample } from './examples/FocusZone.List.Example'; import { FocusZoneDisabledExample } from './examples/FocusZone.Disabled.Example'; -import { FocusZoneTabbableExample } from './examples/FocusZone.Tabbable.Example' +import { FocusZoneTabbableExample } from './examples/FocusZone.Tabbable.Example'; const FocusZonePhotosExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx') as string; const FocusZoneListExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx') as string; diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx index 0b217165f53bac..09a642ccf84ed6 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx @@ -14,7 +14,7 @@ export const FocusZoneTabbableExample = () => ( Circular Tabbable FocusZone: Button 1 Button 2 - + Button 3 diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Exampletsx.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Exampletsx.tsx deleted file mode 100644 index b5614ed0199bd8..00000000000000 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Exampletsx.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* tslint:disable:no-unused-variable */ -import * as React from 'react'; -/* tslint:enable:no-unused-variable */ - -import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; -import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import './FocusZone.Disabled.Example.scss'; - -export const FocusZoneTabbableExample = () => ( -
-
- - Enabled FocusZone: - Button 1 - Button 2 - - Button 3 - -
-
-); From bb3ff0b716342dce29c1314ad5e6c1bcb7570407 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Wed, 21 Feb 2018 18:07:07 -0800 Subject: [PATCH 10/18] added actual tabbable example scss to fix build crash --- .../examples/FocusZone.Tabbable.Example.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss new file mode 100644 index 00000000000000..5dd6ad148d8a04 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss @@ -0,0 +1,11 @@ +:global { + .ms-FocusZoneTabbableExample .ms-Row { + display: block; + margin: 5px; + } + + .ms-FocusZoneTabbableExample-textField { + display: inline-block; + width: 300px; + } +} From e478938248b9596bcdb9a16de26395a6800ec146 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Thu, 22 Feb 2018 14:34:02 -0800 Subject: [PATCH 11/18] Adding FocusZoneTabbableElements enum --- .../components/ContextualMenu/ContextualMenu.tsx | 4 ++-- .../src/components/FocusZone/FocusZone.test.tsx | 4 ++-- .../src/components/FocusZone/FocusZone.tsx | 3 ++- .../src/components/FocusZone/FocusZone.types.ts | 14 +++++++++++++- .../examples/FocusZone.Tabbable.Example.tsx | 4 ++-- 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx index 34f04a285937ca..4ac3dc97d8e9ed 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { IContextualMenuProps, IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types'; import { DirectionalHint } from '../../common/DirectionalHint'; -import { FocusZone, FocusZoneDirection, IFocusZoneProps } from '../../FocusZone'; +import { FocusZone, FocusZoneDirection, IFocusZoneProps, FocusZoneTabbableElements } from '../../FocusZone'; import { IMenuItemClassNames, IContextualMenuClassNames, @@ -319,7 +319,7 @@ export class ContextualMenu extends BaseComponent
    { let lastFocusedElement: HTMLElement | undefined; @@ -1048,7 +1048,7 @@ describe('FocusZone', () => { const tabDownListener = jest.fn(); const component = ReactTestUtils.renderIntoDocument(
    - + 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 f6d95fb704b8c5..48b3877d9eb3ba 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { FocusZoneDirection, + FocusZoneTabbableElements, IFocusZone, IFocusZoneProps } from './FocusZone.types'; @@ -366,7 +367,7 @@ export class FocusZone extends BaseComponent implements IFo return; case KeyCodes.tab: - if (this.props.allowTabKey) { + if (this.props.tabPermission === FocusZoneTabbableElements.all) { let focusChanged = false; this._processingTabKey = true; if (direction === FocusZoneDirection.vertical || 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 64af0ab3374137..13e8dede158412 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 @@ -109,7 +109,7 @@ export interface IFocusZoneProps extends React.HTMLAttributes (
    - + Circular Tabbable FocusZone: Button 1 Button 2 From ef7dd1edb7301aee619035815f5ce601f98e012c Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Thu, 22 Feb 2018 15:39:31 -0800 Subject: [PATCH 12/18] add new input only mode that allows skipping of focus on tab for input elements --- .../src/components/FocusZone/FocusZone.tsx | 7 ++++++- .../FocusZone/examples/FocusZone.Tabbable.Example.tsx | 11 +++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) 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 48b3877d9eb3ba..efc0fd55c61ef3 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -367,7 +367,8 @@ export class FocusZone extends BaseComponent implements IFo return; case KeyCodes.tab: - if (this.props.tabPermission === FocusZoneTabbableElements.all) { + if (this.props.tabPermission === FocusZoneTabbableElements.all + || (this.props.tabPermission === FocusZoneTabbableElements.inputOnly && this._isElementInput(ev.target as HTMLElement))) { let focusChanged = false; this._processingTabKey = true; if (direction === FocusZoneDirection.vertical || @@ -789,6 +790,10 @@ export class FocusZone extends BaseComponent implements IFo } private _shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean) { + if (this.props.tabPermission === FocusZoneTabbableElements.inputOnly && !this._processingTabKey) { + return false; + } + // If a tab was used, we want to focus on the next element. if (!this._processingTabKey && element && diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx index 8e0a3b6580706c..c01d57d23bfafe 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx @@ -18,5 +18,16 @@ export const FocusZoneTabbableExample = () => ( Button 3
    +
    + + Input Only FocusZone: + Button 1 + Button 2 + + Button 3 + +
    + + ); From a8b146ab04cf9ce2b858b2ced88eddf6b6d46cbb Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Thu, 22 Feb 2018 15:43:29 -0800 Subject: [PATCH 13/18] cleaned things up and added better comments --- .../src/components/FocusZone/FocusZone.types.ts | 6 +++--- .../FocusZone/examples/FocusZone.Tabbable.Example.tsx | 2 -- 2 files changed, 3 insertions(+), 5 deletions(-) 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 13e8dede158412..81ffa2f9d4dd1f 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 @@ -121,13 +121,13 @@ export interface IFocusZoneProps extends React.HTMLAttributes (
    - - ); From cffed1e619735fde3aa77cae675f2f75ee0c2495 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Thu, 22 Feb 2018 17:32:05 -0800 Subject: [PATCH 14/18] updated pr for everything except test --- .../ContextualMenu/ContextualMenu.tsx | 2 +- .../components/FocusZone/FocusZone.test.tsx | 4 ++-- .../src/components/FocusZone/FocusZone.tsx | 19 +++++++++++-------- .../components/FocusZone/FocusZone.types.ts | 13 +++++++++++-- .../examples/FocusZone.Tabbable.Example.tsx | 4 ++-- 5 files changed, 27 insertions(+), 15 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx index 4ac3dc97d8e9ed..9d4cedbdbda0a5 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx @@ -319,7 +319,7 @@ export class ContextualMenu extends BaseComponent
      { const tabDownListener = jest.fn(); const component = ReactTestUtils.renderIntoDocument(
      - + @@ -1132,7 +1132,7 @@ describe('FocusZone', () => {
      - + g
      ); 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 efc0fd55c61ef3..7a36c84a432c51 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -70,7 +70,11 @@ export class FocusZone extends BaseComponent implements IFo constructor(props: IFocusZoneProps) { super(props); - this._warnDeprecations({ rootProps: undefined }); + this._warnDeprecations({ + rootProps: undefined, + 'allowTabKey': 'handleTabKey' + }); + this._id = getId('FocusZone'); @@ -367,8 +371,9 @@ export class FocusZone extends BaseComponent implements IFo return; case KeyCodes.tab: - if (this.props.tabPermission === FocusZoneTabbableElements.all - || (this.props.tabPermission === FocusZoneTabbableElements.inputOnly && this._isElementInput(ev.target as HTMLElement))) { + if (this.props.allowTabKey || + this.props.handleTabKey === FocusZoneTabbableElements.all || + (this.props.handleTabKey === FocusZoneTabbableElements.inputOnly && this._isElementInput(ev.target as HTMLElement))) { let focusChanged = false; this._processingTabKey = true; if (direction === FocusZoneDirection.vertical || @@ -790,10 +795,6 @@ export class FocusZone extends BaseComponent implements IFo } private _shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean) { - if (this.props.tabPermission === FocusZoneTabbableElements.inputOnly && !this._processingTabKey) { - return false; - } - // If a tab was used, we want to focus on the next element. if (!this._processingTabKey && element && @@ -808,9 +809,11 @@ export class FocusZone extends BaseComponent implements IFo // 1. There is range selected. // 2. When selection start is larger than 0 and it is backward. // 3. when selection start is not the end of lenght and it is forward. + // 4. We press any of the arrow keys when we're in a mode that supports tab (only losing focus if we hit tab) if (isRangeSelected || (selectionStart > 0 && !isForward) || - (selectionStart !== inputValue.length && isForward)) { + (selectionStart !== inputValue.length && isForward) || + this.props.handleTabKey === FocusZoneTabbableElements.inputOnly || this.props.handleTabKey === FocusZoneTabbableElements.all) { return false; } } 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 81ffa2f9d4dd1f..ffd003fc2a46ca 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 @@ -108,8 +108,17 @@ export interface IFocusZoneProps extends React.HTMLAttributes (
      - + Circular Tabbable FocusZone: Button 1 Button 2 @@ -19,7 +19,7 @@ export const FocusZoneTabbableExample = () => (
      - + Input Only FocusZone: Button 1 Button 2 From e2a1c59d6e4f2b6435fb1178baea3e4b1f5a4769 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Thu, 22 Feb 2018 17:55:23 -0800 Subject: [PATCH 15/18] added unit test --- .../components/FocusZone/FocusZone.test.tsx | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx index 224afadfbd4c1f..22201f20588c44 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx @@ -1160,4 +1160,62 @@ describe('FocusZone', () => { const onKeyDownEvent = tabDownListener.mock.calls[0][0]; expect(onKeyDownEvent.which).toBe(KeyCodes.tab); }); + + + it('Changes our focus to the next button when we hit tab when focus zone allow tabbing on input', () => { + const tabDownListener = jest.fn(); + const component = ReactTestUtils.renderIntoDocument( +
      + + + + +
      + ); + + const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element; + + const inputA = focusZone.querySelector('.a') as HTMLElement; + const buttonB = focusZone.querySelector('.b') as HTMLElement; + + setupElement(inputA, { + clientRect: { + top: 0, + bottom: 20, + left: 20, + right: 40 + } + }); + + setupElement(buttonB, { + clientRect: { + top: 0, + bottom: 20, + left: 20, + right: 40 + } + }); + + // InputA should be focused. + inputA.focus(); + ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); + ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); + ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); + ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); + ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); + ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); + ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); + expect(lastFocusedElement).toBe(inputA); + + expect(inputA.tabIndex).toBe(0); + expect(buttonB.tabIndex).toBe(-1); + + // Pressing tab will shift focus to button B + ReactTestUtils.Simulate.keyDown(inputA, { which: KeyCodes.tab }); + expect(lastFocusedElement).toBe(buttonB); + expect(inputA.tabIndex).toBe(-1); + expect(buttonB.tabIndex).toBe(0); + }); + + }); From def63ae4a0523f6dd4490063fe0b320282fe27d4 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Thu, 22 Feb 2018 18:14:46 -0800 Subject: [PATCH 16/18] optimized if statement; cleaned up test --- .../src/components/FocusZone/FocusZone.test.tsx | 9 ++++++--- .../src/components/FocusZone/FocusZone.tsx | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx index 22201f20588c44..4e130a044afe91 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx @@ -1132,7 +1132,7 @@ describe('FocusZone', () => {
      - g +
      ); @@ -1162,7 +1162,7 @@ describe('FocusZone', () => { }); - it('Changes our focus to the next button when we hit tab when focus zone allow tabbing on input', () => { + it('should stay in input box with arrow keys and exit with tab', () => { const tabDownListener = jest.fn(); const component = ReactTestUtils.renderIntoDocument(
      @@ -1198,6 +1198,9 @@ describe('FocusZone', () => { // InputA should be focused. inputA.focus(); + expect(lastFocusedElement).toBe(inputA); + + // When we hit right/left on the arrow key, we don't want to be able to leave focus on an input ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right }); @@ -1210,7 +1213,7 @@ describe('FocusZone', () => { expect(inputA.tabIndex).toBe(0); expect(buttonB.tabIndex).toBe(-1); - // Pressing tab will shift focus to button B + // Pressing tab will be the only way for us to exit the focus zone ReactTestUtils.Simulate.keyDown(inputA, { which: KeyCodes.tab }); expect(lastFocusedElement).toBe(buttonB); expect(inputA.tabIndex).toBe(-1); 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 7a36c84a432c51..1c298b0f558561 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -813,7 +813,7 @@ export class FocusZone extends BaseComponent implements IFo if (isRangeSelected || (selectionStart > 0 && !isForward) || (selectionStart !== inputValue.length && isForward) || - this.props.handleTabKey === FocusZoneTabbableElements.inputOnly || this.props.handleTabKey === FocusZoneTabbableElements.all) { + !!this.props.handleTabKey) { return false; } } From 7cfcf8b9553cc11c63dd7e9c5f3dfe658fb1299a Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Thu, 22 Feb 2018 18:19:23 -0800 Subject: [PATCH 17/18] separated ampersand for if statement --- .../src/components/FocusZone/FocusZone.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 1c298b0f558561..cec57adfe2edc5 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -373,7 +373,8 @@ export class FocusZone extends BaseComponent implements IFo case KeyCodes.tab: if (this.props.allowTabKey || this.props.handleTabKey === FocusZoneTabbableElements.all || - (this.props.handleTabKey === FocusZoneTabbableElements.inputOnly && this._isElementInput(ev.target as HTMLElement))) { + (this.props.handleTabKey === FocusZoneTabbableElements.inputOnly && + this._isElementInput(ev.target as HTMLElement))) { let focusChanged = false; this._processingTabKey = true; if (direction === FocusZoneDirection.vertical || @@ -809,7 +810,7 @@ export class FocusZone extends BaseComponent implements IFo // 1. There is range selected. // 2. When selection start is larger than 0 and it is backward. // 3. when selection start is not the end of lenght and it is forward. - // 4. We press any of the arrow keys when we're in a mode that supports tab (only losing focus if we hit tab) + // 4. We press any of the arrow keys when our handleTabKey isn't none or undefined (only losing focus if we hit tab) if (isRangeSelected || (selectionStart > 0 && !isForward) || (selectionStart !== inputValue.length && isForward) || From 787fa4a2b1d176f8dd8c79a62610ac3c0c6e4230 Mon Sep 17 00:00:00 2001 From: "REDMOND\\chiechan" Date: Thu, 22 Feb 2018 18:35:13 -0800 Subject: [PATCH 18/18] update all lint probelms --- .../src/components/FocusZone/FocusZone.test.tsx | 5 +---- .../src/components/FocusZone/FocusZone.tsx | 1 - 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx index 4e130a044afe91..6f684867186a9d 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx @@ -1161,13 +1161,12 @@ describe('FocusZone', () => { expect(onKeyDownEvent.which).toBe(KeyCodes.tab); }); - it('should stay in input box with arrow keys and exit with tab', () => { const tabDownListener = jest.fn(); const component = ReactTestUtils.renderIntoDocument(
      - +
      @@ -1219,6 +1218,4 @@ describe('FocusZone', () => { expect(inputA.tabIndex).toBe(-1); expect(buttonB.tabIndex).toBe(0); }); - - }); 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 cec57adfe2edc5..ebb576fa1663e5 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -75,7 +75,6 @@ export class FocusZone extends BaseComponent implements IFo 'allowTabKey': 'handleTabKey' }); - this._id = getId('FocusZone'); this._focusAlignment = {