Prevent menu click/mousedown from blurring the menu (#579)

Author: ericgio

src/__tests__/components/Menu.test.js

@@ -91,26 +91,32 @@ describe('<Menu>', () => {
     expect(scheduleUpdate).toHaveBeenCalledTimes(1);
   });
 
-  test('<Menu.Divider>', () => {
-    const wrapper = shallow(<Menu.Divider />);
-
-    expect(wrapper.type()).toBe('div');
-    expect(wrapper.hasClass('dropdown-divider')).toBe(true);
-    expect(wrapper.prop('role')).toBe('separator');
+  test('prevents the input from blurring on mousedown', () => {
+    const e = { preventDefault: jest.fn() };
+    menu.simulate('mousedown', e);
+    expect(e.preventDefault).toHaveBeenCalledTimes(1);
   });
+});
 
-  test('<Menu.Header>', () => {
-    const children = 'This is a menu header';
+test('<Menu.Divider>', () => {
+  const wrapper = shallow(<Menu.Divider />);
 
-    const wrapper = shallow(
-      <Menu.Header>
-        {children}
-      </Menu.Header>
-    );
+  expect(wrapper.type()).toBe('div');
+  expect(wrapper.hasClass('dropdown-divider')).toBe(true);
+  expect(wrapper.prop('role')).toBe('separator');
+});
 
-    expect(wrapper.type()).toBe('div');
-    expect(wrapper.hasClass('dropdown-header')).toBe(true);
-    expect(wrapper.prop('role')).toBe('heading');
-    expect(wrapper.text()).toBe(children);
-  });
+test('<Menu.Header>', () => {
+  const children = 'This is a menu header';
+
+  const wrapper = shallow(
+    <Menu.Header>
+      {children}
+    </Menu.Header>
+  );
+
+  expect(wrapper.type()).toBe('div');
+  expect(wrapper.hasClass('dropdown-header')).toBe(true);
+  expect(wrapper.prop('role')).toBe('heading');
+  expect(wrapper.text()).toBe(children);
 });

src/components/Menu.js

@@ -6,6 +6,7 @@ import React, { Children, type Node } from 'react';
 
 import { BaseMenuItem } from './MenuItem';
 
+import { preventInputBlur } from '../utils';
 import { checkPropType, isRequiredForA11y } from '../propTypes';
 import type { Id, MenuProps } from '../types';
 
@@ -90,6 +91,7 @@ class Menu extends React.Component<MenuComponentProps> {
       children;
 
     return (
+      /* eslint-disable jsx-a11y/interactive-supports-focus */
       <div
         aria-label={this.props['aria-label']}
         className={cx('rbt-menu', 'dropdown-menu', 'show', className)}
@@ -99,6 +101,10 @@ class Menu extends React.Component<MenuComponentProps> {
           // positioning updates correctly.
           text
         }
+        onMouseDown={
+          // Prevent input from blurring when clicking on the menu scrollbar.
+          preventInputBlur
+        }
         ref={innerRef}
         role="listbox"
         style={{
@@ -109,6 +115,7 @@ class Menu extends React.Component<MenuComponentProps> {
         }}>
         {contents}
       </div>
+      /* eslint-enable jsx-a11y/interactive-supports-focus */
     );
   }
 }