rsuite 4.9.2 → 4.10.1

package/es/MultiCascader/DropdownMenu.js

@@ -146,7 +146,7 @@ function (_React$Component) {
       className: classes,
       componentClass: "li",
       indeterminate: cascade && !active && this.utils.isSomeChildChecked(node, value),
-      onSelectItem: this.handleSelect.bind(this, layer, node),
+      onSelectItem: this.handleSelect.bind(this, layer),
       onCheck: onCheck,
       checkable: !uncheckable
     }, renderMenuItem ? renderMenuItem(label, node) : label, children ? React.createElement("span", {

package/es/MultiCascader/MultiCascader.d.ts

@@ -41,6 +41,14 @@ export interface MultiCascaderProps<ValueType = any> extends FormControlPickerPr
     event: React.SyntheticEvent<HTMLElement>
   ) => void;
 
+  /** Called after the checkbox state changes */
+  onCheck?: (
+    value: ValueType,
+    item: any,
+    checked: boolean,
+    event: React.SyntheticEvent<HTMLElement>
+  ) => void;
+
   /** Called when clean */
   onClean?: (event: React.SyntheticEvent<HTMLElement>) => void;
 

package/es/MultiCascader/MultiCascader.js

@@ -37,9 +37,10 @@ function (_React$Component) {
     _this.handleCheck = function (item, event, checked) {
       var _this$props = _this.props,
           valueKey = _this$props.valueKey,
-          onChange = _this$props.onChange,
           cascade = _this$props.cascade,
-          uncheckableItemValues = _this$props.uncheckableItemValues;
+          uncheckableItemValues = _this$props.uncheckableItemValues,
+          onChange = _this$props.onChange,
+          onCheck = _this$props.onCheck;
       var itemValue = item[valueKey];
       var value = [];
 
@@ -64,6 +65,7 @@ function (_React$Component) {
       }
 
       onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(value, item, checked, event);
     };
 
     _this.handleChangeForSearchItem = function (value, checked, event) {
@@ -543,7 +545,8 @@ MultiCascader.propTypes = _extends({}, listPickerPropTypes, {
   renderMenuItem: PropTypes.func,
   renderMenu: PropTypes.func,
   onSearch: PropTypes.func,
-  onSelect: PropTypes.func
+  onSelect: PropTypes.func,
+  onCheck: PropTypes.func
 });
 MultiCascader.defaultProps = _extends({}, listPickerDefaultProps, {
   searchable: true,

package/es/Nav/Nav.js

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { setStatic } from 'recompose';
 import shallowEqual from '../utils/shallowEqual';
 import NavItem from './NavItem';
-import { prefix, getUnhandledProps, defaultProps, ReactChildren } from '../utils';
+import { prefix, getUnhandledProps, defaultProps, ReactChildren, createChainedFunction } from '../utils';
 import { getClassNamePrefix } from '../utils/prefix';
 import { NavbarContext } from '../Navbar/Navbar';
 import { SidenavContext } from '../Sidenav/Sidenav';
@@ -54,20 +54,21 @@ function (_React$Component) {
       var _item$props = item.props,
           eventKey = _item$props.eventKey,
           active = _item$props.active,
-          rest = _objectWithoutPropertiesLoose(_item$props, ["eventKey", "active"]);
+          onSelectItem = _item$props.onSelect,
+          rest = _objectWithoutPropertiesLoose(_item$props, ["eventKey", "active", "onSelect"]);
 
       var displayName = item === null || item === void 0 ? void 0 : (_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName;
       var hasTooltip = sidenav && !expanded;
 
       if (~(displayName === null || displayName === void 0 ? void 0 : displayName.indexOf('(NavItem)'))) {
         return _extends({}, rest, {
-          onSelect: onSelect,
+          onSelect: createChainedFunction(onSelect, onSelectItem),
           hasTooltip: hasTooltip,
           active: typeof activeKey === 'undefined' ? active : shallowEqual(activeKey, eventKey)
         });
       } else if (~(displayName === null || displayName === void 0 ? void 0 : displayName.indexOf('(Dropdown)'))) {
         return _extends({}, rest, {
-          onSelect: onSelect,
+          onSelect: createChainedFunction(onSelect, onSelectItem),
           activeKey: activeKey,
           showHeader: hasTooltip,
           componentClass: 'li'

package/es/Overlay/OverlayTrigger.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AnimationEventProps, StandardProps, TypeAttributes } from '../@types/common';
 
-export type OverlayTriggerTrigger = 'click' | 'hover' | 'focus' | 'active' | 'none';
+export type OverlayTriggerTrigger = 'click' | 'contextMenu' | 'hover' | 'focus' | 'active' | 'none';
 
 export interface TriggerProps extends AnimationEventProps, StandardProps {
   /** Triggering events */

package/es/Overlay/OverlayTrigger.js

@@ -49,7 +49,7 @@ function (_React$Component) {
       var trigger = _this.props.trigger;
       _this.mouseEnteredToSpeaker = false;
 
-      if (!isOneOf('click', trigger) && !isOneOf('active', trigger)) {
+      if (!isOneOf('click', trigger) && !isOneOf('active', trigger) && !isOneOf('contextMenu', trigger)) {
         _this.hideWithCheck();
       }
     };
@@ -113,6 +113,10 @@ function (_React$Component) {
       }
     };
 
+    _this.preventDefault = function (event) {
+      event.preventDefault();
+    };
+
     _this.handleDelayedShow = function () {
       var _this$props2 = _this.props,
           delayShow = _this$props2.delayShow,
@@ -216,6 +220,8 @@ function (_React$Component) {
 
     if (isOneOf('click', trigger)) {
       overlayProps.onHide = createChainedFunction(this.hide, onHide);
+    } else if (isOneOf('contextMenu', trigger)) {
+      overlayProps.onHide = createChainedFunction(this.hide, onHide);
     } else if (isOneOf('active', trigger)) {
       overlayProps.onHide = createChainedFunction(this.hide, onHide);
     }
@@ -245,6 +251,7 @@ function (_React$Component) {
         children = _this$props5.children,
         speaker = _this$props5.speaker,
         onClick = _this$props5.onClick,
+        onContextMenu = _this$props5.onContextMenu,
         trigger = _this$props5.trigger,
         onMouseOver = _this$props5.onMouseOver,
         onMouseOut = _this$props5.onMouseOut,
@@ -264,6 +271,10 @@ function (_React$Component) {
         props.onClick = createChainedFunction(this.toggleHideAndShow, props.onClick);
       }
 
+      if (isOneOf('contextMenu', trigger)) {
+        props.onContextMenu = createChainedFunction(this.preventDefault, this.toggleHideAndShow, triggerProps.onContextMenu, onContextMenu);
+      }
+
       if (isOneOf('active', trigger)) {
         props.onClick = createChainedFunction(this.handleDelayedShow, props.onClick);
       }

package/es/Table/styles/common.less

@@ -166,11 +166,12 @@
     border-style: solid;
     border-width: 0;
     border-color: @table-border-color;
-    display: block;
     overflow: hidden;
     position: absolute;
     white-space: normal;
     background: @table-body-background;
+    display: table;
+    table-layout: fixed;
 
     &.first {
       border-left-width: 0;

package/es/Uploader/Uploader.js

@@ -48,6 +48,8 @@ function (_React$Component) {
 
       (_this$props$onRemove = (_this$props = _this.props).onRemove) === null || _this$props$onRemove === void 0 ? void 0 : _this$props$onRemove.call(_this$props, file);
       (_this$props$onChange = (_this$props2 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, nextFileList);
+
+      _this.cleanInputValue();
     };
 
     _this.handleUploadTriggerChange = function (event) {

package/lib/MultiCascader/DropdownMenu.js

@@ -168,7 +168,7 @@ function (_React$Component) {
       className: classes,
       componentClass: "li",
       indeterminate: cascade && !active && this.utils.isSomeChildChecked(node, value),
-      onSelectItem: this.handleSelect.bind(this, layer, node),
+      onSelectItem: this.handleSelect.bind(this, layer),
       onCheck: onCheck,
       checkable: !uncheckable
     }, renderMenuItem ? renderMenuItem(label, node) : label, children ? React.createElement("span", {

package/lib/MultiCascader/MultiCascader.d.ts

@@ -41,6 +41,14 @@ export interface MultiCascaderProps<ValueType = any> extends FormControlPickerPr
     event: React.SyntheticEvent<HTMLElement>
   ) => void;
 
+  /** Called after the checkbox state changes */
+  onCheck?: (
+    value: ValueType,
+    item: any,
+    checked: boolean,
+    event: React.SyntheticEvent<HTMLElement>
+  ) => void;
+
   /** Called when clean */
   onClean?: (event: React.SyntheticEvent<HTMLElement>) => void;
 

package/lib/MultiCascader/MultiCascader.js

@@ -66,9 +66,10 @@ function (_React$Component) {
     _this.handleCheck = function (item, event, checked) {
       var _this$props = _this.props,
           valueKey = _this$props.valueKey,
-          onChange = _this$props.onChange,
           cascade = _this$props.cascade,
-          uncheckableItemValues = _this$props.uncheckableItemValues;
+          uncheckableItemValues = _this$props.uncheckableItemValues,
+          onChange = _this$props.onChange,
+          onCheck = _this$props.onCheck;
       var itemValue = item[valueKey];
       var value = [];
 
@@ -93,6 +94,7 @@ function (_React$Component) {
       }
 
       onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(value, item, checked, event);
     };
 
     _this.handleChangeForSearchItem = function (value, checked, event) {
@@ -569,7 +571,8 @@ MultiCascader.propTypes = (0, _extends3.default)({}, _propTypes2.listPickerPropT
   renderMenuItem: _propTypes.default.func,
   renderMenu: _propTypes.default.func,
   onSearch: _propTypes.default.func,
-  onSelect: _propTypes.default.func
+  onSelect: _propTypes.default.func,
+  onCheck: _propTypes.default.func
 });
 MultiCascader.defaultProps = (0, _extends3.default)({}, _propTypes2.listPickerDefaultProps, {
   searchable: true,

package/lib/Nav/Nav.js

@@ -76,19 +76,20 @@ function (_React$Component) {
       var _item$props = item.props,
           eventKey = _item$props.eventKey,
           active = _item$props.active,
-          rest = (0, _objectWithoutPropertiesLoose2.default)(_item$props, ["eventKey", "active"]);
+          onSelectItem = _item$props.onSelect,
+          rest = (0, _objectWithoutPropertiesLoose2.default)(_item$props, ["eventKey", "active", "onSelect"]);
       var displayName = item === null || item === void 0 ? void 0 : (_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName;
       var hasTooltip = sidenav && !expanded;
 
       if (~(displayName === null || displayName === void 0 ? void 0 : displayName.indexOf('(NavItem)'))) {
         return (0, _extends2.default)({}, rest, {
-          onSelect: onSelect,
+          onSelect: (0, _utils.createChainedFunction)(onSelect, onSelectItem),
           hasTooltip: hasTooltip,
           active: typeof activeKey === 'undefined' ? active : (0, _shallowEqual.default)(activeKey, eventKey)
         });
       } else if (~(displayName === null || displayName === void 0 ? void 0 : displayName.indexOf('(Dropdown)'))) {
         return (0, _extends2.default)({}, rest, {
-          onSelect: onSelect,
+          onSelect: (0, _utils.createChainedFunction)(onSelect, onSelectItem),
           activeKey: activeKey,
           showHeader: hasTooltip,
           componentClass: 'li'

package/lib/Overlay/OverlayTrigger.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AnimationEventProps, StandardProps, TypeAttributes } from '../@types/common';
 
-export type OverlayTriggerTrigger = 'click' | 'hover' | 'focus' | 'active' | 'none';
+export type OverlayTriggerTrigger = 'click' | 'contextMenu' | 'hover' | 'focus' | 'active' | 'none';
 
 export interface TriggerProps extends AnimationEventProps, StandardProps {
   /** Triggering events */

package/lib/Overlay/OverlayTrigger.js

@@ -70,7 +70,7 @@ function (_React$Component) {
       var trigger = _this.props.trigger;
       _this.mouseEnteredToSpeaker = false;
 
-      if (!(0, _isOneOf.default)('click', trigger) && !(0, _isOneOf.default)('active', trigger)) {
+      if (!(0, _isOneOf.default)('click', trigger) && !(0, _isOneOf.default)('active', trigger) && !(0, _isOneOf.default)('contextMenu', trigger)) {
         _this.hideWithCheck();
       }
     };
@@ -134,6 +134,10 @@ function (_React$Component) {
       }
     };
 
+    _this.preventDefault = function (event) {
+      event.preventDefault();
+    };
+
     _this.handleDelayedShow = function () {
       var _this$props2 = _this.props,
           delayShow = _this$props2.delayShow,
@@ -236,6 +240,8 @@ function (_React$Component) {
 
     if ((0, _isOneOf.default)('click', trigger)) {
       overlayProps.onHide = (0, _createChainedFunction.default)(this.hide, onHide);
+    } else if ((0, _isOneOf.default)('contextMenu', trigger)) {
+      overlayProps.onHide = (0, _createChainedFunction.default)(this.hide, onHide);
     } else if ((0, _isOneOf.default)('active', trigger)) {
       overlayProps.onHide = (0, _createChainedFunction.default)(this.hide, onHide);
     }
@@ -265,6 +271,7 @@ function (_React$Component) {
         children = _this$props5.children,
         speaker = _this$props5.speaker,
         onClick = _this$props5.onClick,
+        onContextMenu = _this$props5.onContextMenu,
         trigger = _this$props5.trigger,
         onMouseOver = _this$props5.onMouseOver,
         onMouseOut = _this$props5.onMouseOut,
@@ -284,6 +291,10 @@ function (_React$Component) {
         props.onClick = (0, _createChainedFunction.default)(this.toggleHideAndShow, props.onClick);
       }
 
+      if ((0, _isOneOf.default)('contextMenu', trigger)) {
+        props.onContextMenu = (0, _createChainedFunction.default)(this.preventDefault, this.toggleHideAndShow, triggerProps.onContextMenu, onContextMenu);
+      }
+
       if ((0, _isOneOf.default)('active', trigger)) {
         props.onClick = (0, _createChainedFunction.default)(this.handleDelayedShow, props.onClick);
       }

package/lib/Table/styles/common.less

@@ -166,11 +166,12 @@
     border-style: solid;
     border-width: 0;
     border-color: @table-border-color;
-    display: block;
     overflow: hidden;
     position: absolute;
     white-space: normal;
     background: @table-body-background;
+    display: table;
+    table-layout: fixed;
 
     &.first {
       border-left-width: 0;

package/lib/Uploader/Uploader.js

@@ -70,6 +70,8 @@ function (_React$Component) {
 
       (_this$props$onRemove = (_this$props = _this.props).onRemove) === null || _this$props$onRemove === void 0 ? void 0 : _this$props$onRemove.call(_this$props, file);
       (_this$props$onChange = (_this$props2 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, nextFileList);
+
+      _this.cleanInputValue();
     };
 
     _this.handleUploadTriggerChange = function (event) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "4.9.2",
+  "version": "4.10.1",
   "description": "A suite of react components",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -63,7 +63,7 @@
     "react-lifecycles-compat": "^3.0.4",
     "react-virtualized": "^9.21.0",
     "recompose": "^0.30.0",
-    "rsuite-table": "^3.14.3",
+    "rsuite-table": "^3.15.1",
     "schema-typed": "^1.5.1"
   },
   "peerDependencies": {

package/src/MultiCascader/DropdownMenu.tsx

@@ -166,7 +166,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
         className={classes}
         componentClass="li"
         indeterminate={cascade && !active && this.utils.isSomeChildChecked(node, value)}
-        onSelectItem={this.handleSelect.bind(this, layer, node)}
+        onSelectItem={this.handleSelect.bind(this, layer)}
         onCheck={onCheck}
         checkable={!uncheckable}
       >

package/src/MultiCascader/MultiCascader.d.ts

@@ -41,6 +41,14 @@ export interface MultiCascaderProps<ValueType = any> extends FormControlPickerPr
     event: React.SyntheticEvent<HTMLElement>
   ) => void;
 
+  /** Called after the checkbox state changes */
+  onCheck?: (
+    value: ValueType,
+    item: any,
+    checked: boolean,
+    event: React.SyntheticEvent<HTMLElement>
+  ) => void;
+
   /** Called when clean */
   onClean?: (event: React.SyntheticEvent<HTMLElement>) => void;
 

package/src/MultiCascader/MultiCascader.tsx

@@ -57,7 +57,8 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     renderMenuItem: PropTypes.func,
     renderMenu: PropTypes.func,
     onSearch: PropTypes.func,
-    onSelect: PropTypes.func
+    onSelect: PropTypes.func,
+    onCheck: PropTypes.func
   };
 
   static defaultProps = {
@@ -187,7 +188,7 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
   }
 
   handleCheck = (item: any, event: React.SyntheticEvent<any>, checked: boolean) => {
-    const { valueKey, onChange, cascade, uncheckableItemValues } = this.props;
+    const { valueKey, cascade, uncheckableItemValues, onChange, onCheck } = this.props;
     const itemValue = item[valueKey];
     let value = [];
 
@@ -208,6 +209,7 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     }
 
     onChange?.(value, event);
+    onCheck?.(value, item, checked, event);
   };
 
   handleChangeForSearchItem = (value: any, checked: boolean, event: React.SyntheticEvent<any>) => {

package/src/MultiCascader/test/DropdownMenuSpec.js

@@ -112,6 +112,23 @@ describe('MultiCascader -  DropdownMenu', () => {
     }, 1);
   });
 
+  it('Should call onSelect callback with 4 params', done => {
+    const doneOp = (node, activePaths, createConcat, event) => {
+      if (
+        typeof node === 'object' &&
+        Array.isArray(activePaths) &&
+        typeof createConcat === 'function' &&
+        event.target
+      ) {
+        done();
+      }
+    };
+
+    const instance = getInstance(<Dropdown defaultOpen data={items} onSelect={doneOp} />);
+    const menuContainer = getDOMNode(instance.menuContainerRef.current);
+    ReactTestUtils.Simulate.click(menuContainer.querySelectorAll('.rs-checkbox')[1]);
+  });
+
   it('Should not call onSelect callback on disabled item', () => {
     const onSelectSpy = sinon.spy();
     const instance = getInstance(

package/src/MultiCascader/test/MultiCascaderSpec.js

@@ -7,7 +7,6 @@ import Button from '../../Button';
 
 const namespace = `${globalKey}-picker`;
 const toggleClassName = `.${namespace}-toggle-placeholder`;
-const activeClassName = '.rs-dropdown-menu-item-active';
 
 const items = [
   {
@@ -209,6 +208,20 @@ describe('MultiCascader', () => {
     ReactTestUtils.Simulate.click(menu.querySelector('.rs-checkbox'));
   });
 
+  it('Should call onCheck callback ', done => {
+    let checkbox = null;
+    const doneOp = (value, item, checked, event) => {
+      if (value[0] === 'abc' && item.value === 'abc' && checked && event.target === checkbox) {
+        done();
+      }
+    };
+
+    const instance = getInstance(<Dropdown data={items} defaultOpen onCheck={doneOp} />);
+    const menu = findDOMNode(instance.menuContainerRef.current);
+    checkbox = menu.querySelector('.rs-checkbox-wrapper');
+    ReactTestUtils.Simulate.click(checkbox);
+  });
+
   it('Should call onChange callback ', done => {
     const doneOp = value => {
       if (value[0] === 'abc') {

package/src/Nav/Nav.tsx

@@ -5,7 +5,13 @@ import { setStatic } from 'recompose';
 import shallowEqual from '../utils/shallowEqual';
 
 import NavItem from './NavItem';
-import { prefix, getUnhandledProps, defaultProps, ReactChildren } from '../utils';
+import {
+  prefix,
+  getUnhandledProps,
+  defaultProps,
+  ReactChildren,
+  createChainedFunction
+} from '../utils';
 import { getClassNamePrefix } from '../utils/prefix';
 import { NavbarContext } from '../Navbar/Navbar';
 import { SidenavContext } from '../Sidenav/Sidenav';
@@ -56,21 +62,21 @@ class Nav extends React.Component<NavProps> {
     const hasWaterline = appearance !== 'default';
 
     const items = ReactChildren.mapCloneElement(children, item => {
-      const { eventKey, active, ...rest } = item.props;
+      const { eventKey, active, onSelect: onSelectItem, ...rest } = item.props;
       const displayName = item?.type?.displayName;
       const hasTooltip = sidenav && !expanded;
 
       if (~displayName?.indexOf('(NavItem)')) {
         return {
           ...rest,
-          onSelect,
+          onSelect: createChainedFunction(onSelect, onSelectItem),
           hasTooltip,
           active: typeof activeKey === 'undefined' ? active : shallowEqual(activeKey, eventKey)
         };
       } else if (~displayName?.indexOf('(Dropdown)')) {
         return {
           ...rest,
-          onSelect,
+          onSelect: createChainedFunction(onSelect, onSelectItem),
           activeKey,
           showHeader: hasTooltip,
           componentClass: 'li'

package/src/Nav/test/NavSpec.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactTestUtils from 'react-dom/test-utils';
 import { innerText, getDOMNode } from '@test/testUtils';
 
 import Nav from '../Nav';
@@ -68,4 +69,38 @@ describe('Nav', () => {
     const instance = getDOMNode(<Nav classPrefix="custom-prefix" />);
     assert.ok(instance.className.match(/\bcustom-prefix\b/));
   });
+
+  it('Should call onSelect callback', done => {
+    const doneOp = eventKey => {
+      if (eventKey === 2) {
+        done();
+      }
+    };
+    const instance = getDOMNode(
+      <Nav onSelect={doneOp}>
+        <Nav.Item eventKey={1}>1</Nav.Item>
+        <Nav.Item eventKey={2}>2</Nav.Item>
+      </Nav>
+    );
+
+    ReactTestUtils.Simulate.click(instance.querySelectorAll('.rs-nav-item a')[1]);
+  });
+
+  it('Should call onSelect callback on Nav.Item', done => {
+    const doneOp = eventKey => {
+      if (eventKey === 2) {
+        done();
+      }
+    };
+    const instance = getDOMNode(
+      <Nav>
+        <Nav.Item eventKey={1}>1</Nav.Item>
+        <Nav.Item eventKey={2} onSelect={doneOp}>
+          2
+        </Nav.Item>
+      </Nav>
+    );
+
+    ReactTestUtils.Simulate.click(instance.querySelectorAll('.rs-nav-item a')[1]);
+  });
 });

package/src/Overlay/OverlayTrigger.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AnimationEventProps, StandardProps, TypeAttributes } from '../@types/common';
 
-export type OverlayTriggerTrigger = 'click' | 'hover' | 'focus' | 'active' | 'none';
+export type OverlayTriggerTrigger = 'click' | 'contextMenu' | 'hover' | 'focus' | 'active' | 'none';
 
 export interface TriggerProps extends AnimationEventProps, StandardProps {
   /** Triggering events */

package/src/Overlay/OverlayTrigger.tsx

@@ -26,6 +26,7 @@ interface TriggerProps {
   onMouseOut?: React.MouseEventHandler;
   onBlur?: React.MouseEventHandler;
   onClick?: React.MouseEventHandler;
+  onContextMenu?: React.MouseEventHandler;
   onFocus?: React.MouseEventHandler;
 }
 
@@ -81,7 +82,11 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
   handleSpeakerMouseLeave = () => {
     const { trigger } = this.props;
     this.mouseEnteredToSpeaker = false;
-    if (!isOneOf('click', trigger) && !isOneOf('active', trigger)) {
+    if (
+      !isOneOf('click', trigger) &&
+      !isOneOf('active', trigger) &&
+      !isOneOf('contextMenu', trigger)
+    ) {
       this.hideWithCheck();
     }
   };
@@ -130,6 +135,10 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
     }
   };
 
+  preventDefault = (event: React.MouseEvent<Element, MouseEvent>) => {
+    event.preventDefault();
+  };
+
   handleDelayedShow = () => {
     const { delayShow, enterable } = this.props;
     const delay = isNil(delayShow) ? this.props.delay : delayShow;
@@ -197,6 +206,8 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
 
     if (isOneOf('click', trigger)) {
       overlayProps.onHide = createChainedFunction(this.hide, onHide);
+    } else if (isOneOf('contextMenu', trigger)) {
+      overlayProps.onHide = createChainedFunction(this.hide, onHide);
     } else if (isOneOf('active', trigger)) {
       overlayProps.onHide = createChainedFunction(this.hide, onHide);
     }
@@ -228,6 +239,7 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
       children,
       speaker,
       onClick,
+      onContextMenu,
       trigger,
       onMouseOver,
       onMouseOut,
@@ -254,6 +266,15 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
         props.onClick = createChainedFunction(this.toggleHideAndShow, props.onClick);
       }
 
+      if (isOneOf('contextMenu', trigger)) {
+        props.onContextMenu = createChainedFunction(
+          this.preventDefault,
+          this.toggleHideAndShow,
+          triggerProps.onContextMenu,
+          onContextMenu
+        );
+      }
+
       if (isOneOf('active', trigger)) {
         props.onClick = createChainedFunction(this.handleDelayedShow, props.onClick);
       }