Added enum for triggering menu with arrow keys and bool to allow it or not

common/changes/office-ui-fabric-react/add-menu-trigger-button-configuration_2018-02-12-21-02.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Added enum for triggering menu with arrow keys and bool to allow it or not",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "eikawata@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx

@@ -506,7 +506,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       onMenuClick(ev, this);
     }
 
-    if (!ev.defaultPrevented && ev.which === KeyCodes.down) {
+    if (!ev.defaultPrevented &&
+      this.props.menuTriggerKeyCode !== null &&
+      ev.which === (this.props.menuTriggerKeyCode === undefined ? KeyCodes.down : this.props.menuTriggerKeyCode)) {
       this._onToggleMenu();
       ev.preventDefault();
       ev.stopPropagation();

packages/office-ui-fabric-react/src/components/Button/Button.test.tsx

@@ -384,6 +384,74 @@ describe('Button', () => {
       expect(renderedDOM.getAttribute('aria-expanded')).toEqual('true');
     });
 
+    it('If menu trigger is disabled, pressing down does not trigger menu', () => {
+      const button = ReactTestUtils.renderIntoDocument<any>(
+        <DefaultButton
+          data-automation-id='test'
+          text='Create account'
+          menuTriggerKeyCode={ null }
+          menuProps={ {
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          } }
+        />
+      );
+      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+
+      ReactTestUtils.Simulate.keyDown(menuButtonDOM,
+        {
+          which: KeyCodes.down
+        });
+      expect(menuButtonDOM.getAttribute('aria-expanded')).toEqual('false');
+    });
+
+    it('If menu trigger is specefied, default key is overridden', () => {
+      const button = ReactTestUtils.renderIntoDocument<any>(
+        <DefaultButton
+          data-automation-id='test'
+          text='Create account'
+          menuTriggerKeyCode={ KeyCodes.right }
+          menuProps={ {
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          } }
+        />
+      );
+      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+
+      ReactTestUtils.Simulate.keyDown(menuButtonDOM,
+        {
+          which: KeyCodes.down
+        });
+      expect(menuButtonDOM.getAttribute('aria-expanded')).toEqual('false');
+
+      ReactTestUtils.Simulate.keyDown(menuButtonDOM,
+        {
+          which: KeyCodes.right
+        });
+      expect(menuButtonDOM.getAttribute('aria-expanded')).toEqual('true');
+    });
+
     describe('Response to click event', () => {
       let didClick = false;
       const setTrue = (): void => {

packages/office-ui-fabric-react/src/components/Button/Button.types.ts

@@ -3,7 +3,7 @@ import { BaseButton } from './BaseButton';
 import { Button } from './Button';
 import { IButtonClassNames } from './BaseButton.classNames';
 import { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';
-import { IRenderFunction } from '../../Utilities';
+import { IRenderFunction, KeyCodes } from '../../Utilities';
 import { IContextualMenuProps } from '../../ContextualMenu';
 import { IIconProps } from '../../Icon';
 import { IStyle, ITheme } from '../../Styling';
@@ -223,6 +223,12 @@ export interface IButtonProps extends React.AllHTMLAttributes<HTMLAnchorElement
   getSplitButtonClassNames?: (disabled: boolean,
     expanded: boolean,
     checked: boolean) => ISplitButtonClassNames;
+
+  /**
+  * Defines a custom key that opens button menu. If the value is not provided, down arrow key is used.
+  * If set to null, this will be disabled.
+  */
+  menuTriggerKeyCode?: KeyCodes | null;
 }
 
 export enum ElementType {