ComboBox/SplitButton Expand on Touch

common/changes/office-ui-fabric-react/jspurlin-ComboBoxExpandOnTouch_2018-03-23-22-33.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "SplitButton/ComboBox: added onTouch support for menu expansion.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

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

@@ -16,6 +16,7 @@ import { ContextualMenu, IContextualMenuProps } from '../../ContextualMenu';
 import { IButtonProps, IButton } from './Button.types';
 import { IButtonClassNames, getBaseButtonClassNames } from './BaseButton.classNames';
 import { getClassNames as getBaseSplitButtonClassNames, ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';
+import { TouchEvent } from 'react';
 
 export interface IBaseButtonProps extends IButtonProps {
   baseClassName?: string;
@@ -49,6 +50,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   private _descriptionId: string;
   private _ariaDescriptionId: string;
   private _classNames: IButtonClassNames;
+  private _processingTouch: boolean;
+  private _lastTouchTimeoutId: number | undefined;
 
   constructor(props: IBaseButtonProps, rootClassName: string) {
     super(props);
@@ -192,6 +195,12 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return this._onRenderContent(tag, buttonProps);
   }
 
+  public componentDidMount() {
+    if (this._isSplitButton && this._splitButtonContainer.value && 'onpointerdown' in this._splitButtonContainer.value) {
+      this._events.on(this._splitButtonContainer.value, 'pointerdown', this._onPointerDown, true);
+    }
+  }
+
   public componentDidUpdate(prevProps: IBaseButtonProps, prevState: IBaseButtonState) {
     // If Button's menu was closed, run onAfterMenuDismiss
     if (this.props.onAfterMenuDismiss && prevState.menuProps && !this.state.menuProps) {
@@ -425,7 +434,6 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       disabled,
       checked,
       getSplitButtonClassNames,
-      onClick,
       primaryDisabled
     } = this.props;
 
@@ -458,6 +466,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         aria-describedby={ buttonProps.ariaDescription }
         className={ classNames && classNames.splitButtonContainer }
         onKeyDown={ this._onSplitButtonContainerKeyDown }
+        onTouchStart={ this._onTouchStart }
         ref={ this._splitButtonContainer }
         data-is-focusable={ true }
         onClick={ !disabled && !primaryDisabled ? this._onSplitButtonPrimaryClick : undefined }
@@ -478,8 +487,11 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     if (this._isExpanded) {
       this._dismissMenu();
     }
-    if (this.props.onClick) {
+
+    if (!this._processingTouch && this.props.onClick) {
       this.props.onClick(ev);
+    } else {
+      this._onMenuClick(ev);
     }
   }
 
@@ -520,6 +532,14 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } tabIndex={ -1 } />;
   }
 
+  private _onSplitButtonClick = (ev: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => {
+    if (!this._processingTouch && this.props.onClick) {
+      this.props.onClick(ev);
+    } else {
+      this._onMenuClick(ev);
+    }
+  }
+
   private _onMouseDown = (ev: React.MouseEvent<BaseButton>) => {
     if (this.props.onMouseDown) {
       this.props.onMouseDown(ev);
@@ -563,6 +583,36 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     }
   }
 
+  private _onTouchStart: (ev: TouchEvent<HTMLElement>) => void = (ev) => {
+    if (this._isSplitButton && this._splitButtonContainer.value && !('onpointerdown' in this._splitButtonContainer.value)) {
+      this._handleTouchAndPointerEvent();
+    }
+  }
+
+  private _onPointerDown(ev: PointerEvent) {
+    if (ev.pointerType === 'touch') {
+      this._handleTouchAndPointerEvent();
+
+      ev.preventDefault();
+      ev.stopImmediatePropagation();
+    }
+  }
+
+  private _handleTouchAndPointerEvent() {
+    // If we already have an existing timeeout from a previous touch and pointer event
+    // cancel that timeout so we can set a nwe one.
+    if (this._lastTouchTimeoutId !== undefined) {
+      this._async.clearTimeout(this._lastTouchTimeoutId);
+      this._lastTouchTimeoutId = undefined;
+    }
+    this._processingTouch = true;
+
+    this._lastTouchTimeoutId = this._async.setTimeout(() => {
+      this._processingTouch = false;
+      this._lastTouchTimeoutId = undefined;
+    }, 500);
+  }
+
   /**
    * Returns if the user hits a valid keyboard key to open the menu
    * @param ev - the keyboard event
@@ -576,7 +626,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     }
   }
 
-  private _onMenuClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
+  private _onMenuClick = (ev: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => {
     const { onMenuClick } = this.props;
     if (onMenuClick) {
       onMenuClick(ev, this);

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

@@ -384,6 +384,40 @@ describe('Button', () => {
       expect(renderedDOM.getAttribute('aria-expanded')).toEqual('true');
     });
 
+    it('Touch Start on primary button of SplitButton expands menu', () => {
+      const button = ReactTestUtils.renderIntoDocument<any>(
+        <DefaultButton
+          data-automation-id='test'
+          text='Create account'
+          split={ true }
+          onClick={ alertClicked }
+          menuProps={ {
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          } }
+        />
+      );
+      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const primaryButtonDOM: HTMLButtonElement = renderedDOM.getElementsByTagName('button')[0] as HTMLButtonElement;
+
+      // in a normal scenario, when we do a touchstart we would also cause a
+      // click event to fire. This doesn't happen in the simulator so we're
+      // manually adding this in.
+      ReactTestUtils.Simulate.touchStart(primaryButtonDOM);
+      ReactTestUtils.Simulate.click(primaryButtonDOM);
+      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

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

@@ -340,6 +340,32 @@ describe('ComboBox', () => {
     expect(returnUndefined.mock.calls.length).toBe(1);
   });
 
+  it('Call onMenuOpened when touch start on the input', () => {
+    let comboBoxRoot;
+    let inputElement;
+    const returnUndefined = jest.fn();
+
+    const wrapper = mount(
+      <ComboBox
+        label='testgroup'
+        defaultSelectedKey='1'
+        options={ DEFAULT_OPTIONS2 }
+        onMenuOpen={ returnUndefined }
+        allowFreeform={ true }
+      />);
+    comboBoxRoot = wrapper.find('.ms-ComboBox');
+
+    inputElement = comboBoxRoot.find('input');
+
+    // in a normal scenario, when we do a touchstart we would also cause a
+    // click event to fire. This doesn't happen in the simulator so we're
+    // manually adding this in.
+    inputElement.simulate('touchstart');
+    inputElement.simulate('click');
+
+    expect(wrapper.find('.is-open').length).toEqual(1);
+  });
+
   it('Can type a complete option with autocomplete and allowFreeform on and submit it', () => {
     let updatedOption;
     let updatedIndex;