diff --git a/common/changes/office-ui-fabric-react/chiechan-stopAgressiveFocusInMenus_2018-08-15-02-03.json b/common/changes/office-ui-fabric-react/chiechan-stopAgressiveFocusInMenus_2018-08-15-02-03.json new file mode 100644 index 00000000000000..aeb2df3bfa8706 --- /dev/null +++ b/common/changes/office-ui-fabric-react/chiechan-stopAgressiveFocusInMenus_2018-08-15-02-03.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "BaseButton: Add onFocusCapture to the split button container to focus the container instead of doing it in the menu onClick", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "chiechan@microsoft.com" +} diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx index 00ce6d9c4cfba3..dd4685fed1b403 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -453,10 +453,6 @@ export class BaseButton extends BaseComponent { - if (this._splitButtonContainer.current) { - this._splitButtonContainer.current.focus(); - } - const currentMenuProps = this.state.menuProps; let shouldFocusOnMount = true; if (this.props.menuProps && this.props.menuProps.shouldFocusOnMount === false) { @@ -523,6 +519,7 @@ export class BaseButton extends BaseComponent {this._onRenderContent(tag, buttonProps)} @@ -535,6 +532,12 @@ export class BaseButton extends BaseComponent) => { + // We should never be able to focus the individual buttons in a split button. Focus + // should always remain on the container. + this._splitButtonContainer.current && this._splitButtonContainer.current.focus(); + }; + private _onSplitButtonPrimaryClick = (ev: React.MouseEvent) => { if (this._isExpanded) { this._dismissMenu(); diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Button.CommandBar.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Button.CommandBar.Example.tsx.shot index 07d07716619ea4..7b8cbf6891881b 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/Button.CommandBar.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Button.CommandBar.Example.tsx.shot @@ -237,6 +237,7 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] data-is-focusable={true} data-ktp-target={undefined} onClick={[Function]} + onFocusCapture={[Function]} onKeyDown={[Function]} onTouchStart={[Function]} role="button" diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Button.Split.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Button.Split.Example.tsx.shot index 339397489c928a..2aefff8d3eac93 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/Button.Split.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Button.Split.Example.tsx.shot @@ -84,6 +84,7 @@ exports[`Component Examples renders Button.Split.Example.tsx correctly 1`] = ` data-is-focusable={true} data-ktp-target={undefined} onClick={[Function]} + onFocusCapture={[Function]} onKeyDown={[Function]} onTouchStart={[Function]} role="button" @@ -387,6 +388,7 @@ exports[`Component Examples renders Button.Split.Example.tsx correctly 1`] = ` data-is-focusable={true} data-ktp-target={undefined} onClick={[Function]} + onFocusCapture={[Function]} onKeyDown={[Function]} onTouchStart={[Function]} role="button" @@ -700,6 +702,7 @@ exports[`Component Examples renders Button.Split.Example.tsx correctly 1`] = ` data-is-focusable={true} data-ktp-target={undefined} onClick={undefined} + onFocusCapture={[Function]} onKeyDown={[Function]} onTouchStart={[Function]} role="button" @@ -1004,6 +1007,7 @@ exports[`Component Examples renders Button.Split.Example.tsx correctly 1`] = ` data-is-focusable={true} data-ktp-target={undefined} onClick={undefined} + onFocusCapture={[Function]} onKeyDown={[Function]} onTouchStart={[Function]} role="button" @@ -1317,6 +1321,7 @@ exports[`Component Examples renders Button.Split.Example.tsx correctly 2`] = ` data-is-focusable={true} data-ktp-target={undefined} onClick={[Function]} + onFocusCapture={[Function]} onKeyDown={[Function]} onTouchStart={[Function]} role="button" diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.Tabbable.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.Tabbable.Example.tsx.shot index 606538cfc0caff..d614d8e2196fa1 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.Tabbable.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.Tabbable.Example.tsx.shot @@ -523,6 +523,7 @@ exports[`Component Examples renders FocusZone.Tabbable.Example.tsx correctly 1`] data-is-focusable={true} data-ktp-target={undefined} onClick={[Function]} + onFocusCapture={[Function]} onKeyDown={[Function]} onTouchStart={[Function]} role="button" diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Button.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Button.Example.tsx.shot index ba3cccb2928f7d..f1fea458aee348 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Button.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Button.Example.tsx.shot @@ -463,6 +463,7 @@ exports[`Component Examples renders Keytips.Button.Example.tsx correctly 1`] = ` data-is-focusable={true} data-ktp-target="ktp-2-b" onClick={[Function]} + onFocusCapture={[Function]} onKeyDown={[Function]} onTouchStart={[Function]} role="button"