microsoft · chang47 · May 2, 2018 · Mar 12, 2018 · Mar 14, 2018 · Mar 14, 2018
@@ -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]"
+}
@@ -27,6 +27,8 @@ export interface IBaseButtonState {
   menuProps?: IContextualMenuProps | null;
 }
 
+const TouchIdleDelay = 500; /* ms */
+
 export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState> implements IButton {
 
   private get _isSplitButton(): boolean {
@@ -52,6 +54,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);
@@ -200,6 +204,15 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return this._onRenderContent(tag, buttonProps);
   }
 
+  public componentDidMount() {
+    // For split buttons, touching anywhere in the button should drop the dropdown, which should contain the primary action.
+    // This gives more hit target space for touch environments. We're setting the onpointerdown here, because React
+    // does not support Pointer events yet.
+    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) {
@@ -508,6 +521,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
             aria-describedby={ ariaDescribedBy + (keytipAttributes['aria-describedby'] || '') }
             className={ classNames && classNames.splitButtonContainer }
             onKeyDown={ this._onSplitButtonContainerKeyDown }
+            onTouchStart={ this._onTouchStart }
             ref={ this._splitButtonContainer }
             data-is-focusable={ true }
             onClick={ !disabled && !primaryDisabled ? this._onSplitButtonPrimaryClick : undefined }
@@ -530,8 +544,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 if (this._processingTouch) {
+      this._onMenuClick(ev);
     }
   }
 
@@ -624,6 +641,36 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     }
   }
 
+  private _onTouchStart: () => void = () => {
+    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;
+    }, TouchIdleDelay);
+  }
+
   /**
    * Returns if the user hits a valid keyboard key to open the menu
    * @param ev - the keyboard event
@@ -637,7 +684,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);

@@ -394,6 +394,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) as Element;
+      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

@@ -398,6 +398,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;

@@ -81,6 +81,12 @@ enum HoverStatus {
   default = -1
 }
 
+const ScrollIdleDelay = 250 /* ms */;
+const TouchIdleDelay = 500; /* ms */
+
+// This is used to clear any pending autocomplete
+// text (used when autocomplete is true and allowFreeform is false)
+const ReadOnlyPendingAutoCompleteTimeout = 1000 /* ms */;
 interface IComboBoxOptionWrapperProps extends IComboBoxOption {
   // True if the option is currently selected
   isSelected: boolean;
@@ -127,10 +133,6 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   // The base id for the comboBox
   private _id: string;
 
-  // This is used to clear any pending autocomplete
-  // text (used when autocomplete is true and allowFreeform is false)
-  private readonly _readOnlyPendingAutoCompleteTimeout: number = 1000 /* ms */;
-
   // After a character is inserted when autocomplete is true and
   // allowFreeform is false, remember the task that will clear
   // the pending string of characters
@@ -148,10 +150,12 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
   private _hasPendingValue: boolean;
 
-  private readonly _scrollIdleDelay: number = 250 /* ms */;
-
   private _scrollIdleTimeoutId: number | undefined;
 
+  private _processingTouch: boolean;
+
+  private _lastTouchTimeoutId: number | undefined;
+
   // Determines if we should be setting
   // focus back to the input when the menu closes.
   // The general rule of thumb is if the menu was launched
@@ -175,6 +179,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     const selectedKeys: (string | number)[] = this._getSelectedKeys(props.defaultSelectedKey, props.selectedKey);
 
     this._isScrollIdle = true;
+    this._processingTouch = false;
 
     const initialSelectedIndices: number[] = this._getSelectedIndices(props.options, selectedKeys);
 
@@ -191,8 +196,16 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   }
 
   public componentDidMount(): void {
-    // hook up resolving the options if needed on focus
-    this._events.on(this._comboBoxWrapper.current, 'focus', this._onResolveOptions, true);
+    if (this._comboBoxWrapper.current) {
+      // hook up resolving the options if needed on focus
+      this._events.on(this._comboBoxWrapper.current, 'focus', this._onResolveOptions, true);
+      if ('onpointerdown' in this._comboBoxWrapper.current) {
+        // For ComboBoxes, touching anywhere in the combo box should drop the dropdown, including the input element.
+        // This gives more hit target space for touch environments. We're setting the onpointerdown here, because React
+        // does not support Pointer events yet.
+        this._events.on(this._comboBoxWrapper.value, 'pointerdown', this._onPointerDown, true);
+      }
+    }
   }
 
   public componentWillReceiveProps(newProps: IComboBoxProps): void {
@@ -356,6 +369,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
                 onKeyDown={ this._onInputKeyDown }
                 onKeyUp={ this._onInputKeyUp }
                 onClick={ this._onAutofillClick }
+                onTouchStart={ this._onTouchStart }
                 onInputValueChange={ this._onInputChange }
                 aria-expanded={ isOpen }
                 aria-autocomplete={ this._getAriaAutoCompleteValue() }
@@ -692,7 +706,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         this._lastReadOnlyAutoCompleteChangeTimeoutId =
           this._async.setTimeout(
             () => { this._lastReadOnlyAutoCompleteChangeTimeoutId = undefined; },
-            this._readOnlyPendingAutoCompleteTimeout
+            ReadOnlyPendingAutoCompleteTimeout
           );
         return;
       }
@@ -1191,7 +1205,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       this._isScrollIdle = false;
     }
 
-    this._scrollIdleTimeoutId = this._async.setTimeout(() => { this._isScrollIdle = true; }, this._scrollIdleDelay);
+    this._scrollIdleTimeoutId = this._async.setTimeout(() => { this._isScrollIdle = true; }, ScrollIdleDelay);
   }
 
   /**
@@ -1729,12 +1743,42 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    */
   private _onAutofillClick = (): void => {
     if (this.props.allowFreeform) {
-      this.focus(this.state.isOpen);
+      this.focus(this.state.isOpen || this._processingTouch);
     } else {
       this._onComboBoxClick();
     }
   }
 
+  private _onTouchStart: () => void = () => {
+    if (this._comboBoxWrapper.value && !('onpointerdown' in this._comboBoxWrapper)) {
+      this._handleTouchAndPointerEvent();
+    }
+  }
+
+  private _onPointerDown = (ev: PointerEvent): void => {
+    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;
+    }, TouchIdleDelay);
+  }
+
   /**
  * Get the styles for the current option.
  * @param item Item props for the current option

@@ -146,6 +146,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
       onInput={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onTouchStart={[Function]}
       readOnly={true}
       role="combobox"
       spellCheck={false}
@@ -422,6 +423,7 @@ exports[`ComboBox renders a ComboBox with a Keytip correctly 1`] = `
       onInput={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onTouchStart={[Function]}
       readOnly={true}
       role="combobox"
       spellCheck={false}

@@ -176,6 +176,42 @@ describe('ContextualMenu', () => {
     expect(document.querySelector('.SubMenuClass')).toBeDefined();
   });
 
+  it('opens a splitbutton submenu item on touch start', () => {
+    const items: IContextualMenuItem[] = [
+      {
+        name: 'TestText 1',
+        key: 'TestKey1',
+        split: true,
+        onClick: () => { alert('test'); },
+        subMenuProps: {
+          items: [
+            {
+              name: 'SubmenuText 1',
+              key: 'SubmenuKey1',
+              className: 'SubMenuClass'
+            }
+          ]
+        }
+      },
+    ];
+
+    ReactTestUtils.renderIntoDocument<ContextualMenu>(
+      <ContextualMenu
+        items={ items }
+      />
+    );
+
+    const menuItem = document.getElementsByName('TestText 1')[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(menuItem);
+    ReactTestUtils.Simulate.click(menuItem);
+
+    expect(document.querySelector('.is-expanded')).toBeDefined();
+  });
+
   it('sets the correct aria-owns attribute for the submenu', () => {
     const submenuId = 'testSubmenuId';
     const items: IContextualMenuItem[] = [