ComboBox: when clicking on scrollbar do not call onBlur (#6475)

* Fix onBlur invocation when clicking the scrollbar * Rush change log
microsoft · Sep 27, 2018 · 16ee7e1 · 16ee7e1
1 parent 9e45030
commit 16ee7e1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/common/changes/office-ui-fabric-react/v-vibr-ComboBox_onBlurBUG_2018-09-26-00-57.json b/common/changes/office-ui-fabric-react/v-vibr-ComboBox_onBlurBUG_2018-09-26-00-57.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ComboBox: add logic to stop onBlur handler to be invoked when clicking on Callout's scrollbar.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
@@ -16,7 +16,8 @@ import {
   focusAsync,
   getId,
   getNativeProps,
-  shallowCompare
+  shallowCompare,
+  findElementRecursive
 } from '../../Utilities';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { SelectableOptionMenuItemType } from '../../utilities/selectableOption/SelectableOption.types';
@@ -936,8 +937,14 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     }
     if (
       relatedTarget &&
+      // when event coming from withing the comboBox title
       ((this._root.current && this._root.current.contains(relatedTarget as HTMLElement)) ||
-        (this._comboBoxMenu.current && this._comboBoxMenu.current.contains(relatedTarget as HTMLElement)))
+        // when event coming from within the comboBox list menu
+        (this._comboBoxMenu.current &&
+          (this._comboBoxMenu.current.contains(relatedTarget as HTMLElement) ||
+            // when event coming from the callout containing the comboBox list menu (ex: when scrollBar of the Callout clicked)
+            // checks if the relatedTarget is a parent of _comboBoxMenu
+            findElementRecursive(this._comboBoxMenu.current, element => element === relatedTarget))))
     ) {
       event.preventDefault();
       event.stopPropagation();