fix(Dropdown): visibility is controlled when undefined

package.json

@@ -64,7 +64,7 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.6",
-    "rc-trigger": "^5.0.4",
+    "rc-trigger": "^5.2.18",
     "rc-util": "^5.17.0"
   }
 }

src/Dropdown.tsx

@@ -63,7 +63,7 @@ function Dropdown(props: DropdownProps, ref) {
   } = props;
 
   const [triggerVisible, setTriggerVisible] = React.useState<boolean>();
-  const mergedVisible = 'visible' in props ? visible : triggerVisible;
+  const mergedVisible = visible !== undefined ? visible : triggerVisible;
 
   const triggerRef = React.useRef(null);
   React.useImperativeHandle(ref, () => triggerRef.current);

tests/__snapshots__/basic.test.js.snap

@@ -10,7 +10,7 @@ Array [
   <div>
     <div
       class="rc-dropdown"
-      style="opacity: 0; pointer-events: none;"
+      style="opacity: 0;"
     >
       <ul
         class="rc-dropdown-menu rc-dropdown-menu-root rc-dropdown-menu-vertical"

tests/basic.test.js

@@ -45,7 +45,7 @@ describe('dropdown', () => {
     expect(dropdown.find('.my-button').hasClass('rc-dropdown-open')).toBe(true);
   });
 
-  it('supports constrolled visible prop', () => {
+  it('supports controlled visible prop', () => {
     const onVisibleChange = jest.fn();
     const dropdown = mount(
       <Dropdown
@@ -104,6 +104,53 @@ describe('dropdown', () => {
     expect(getPopupDomNode(dropdown).classList.contains('rc-dropdown-hidden')).toBe(true);
   });
 
+  it('controls visibility when visible is undefined', async () => {
+    // Make sure dropdown component is still ""
+    let clicked;
+    let overlayClicked;
+
+    function onClick({ key }) {
+      clicked = key;
+    }
+
+    function onOverlayClick({ key }) {
+      overlayClicked = key;
+    }
+
+    const menu = (
+      <Menu style={{ width: 140 }} onClick={onClick}>
+        <MenuItem key="1">
+          <span className="my-menuitem">one</span>
+        </MenuItem>
+        <Divider />
+        <MenuItem key="2">two</MenuItem>
+      </Menu>
+    );
+    const dropdown = mount(
+      <Dropdown
+        trigger={['click']}
+        overlay={menu}
+        onOverlayClick={onOverlayClick}
+        // If visible is undefined, let dropdown control the component's
+        // visible state, not the consumer
+        visible={undefined}
+      >
+        <button className="my-button">open</button>
+      </Dropdown>,
+    );
+    expect(dropdown.find('.my-button')).toBeTruthy();
+    expect(dropdown.find('.rc-dropdown')).toBeTruthy();
+
+    dropdown.find('.my-button').simulate('click');
+    expect(clicked).toBeUndefined();
+    expect(getPopupDomNode(dropdown).classList.contains('rc-dropdown-hidden')).toBe(false);
+
+    dropdown.find('.my-menuitem').simulate('click');
+    expect(clicked).toBe('1');
+    expect(overlayClicked).toBe('1');
+    expect(getPopupDomNode(dropdown).classList.contains('rc-dropdown-hidden')).toBe(true);
+  });
+
   it('re-align works', async () => {
     const buttonStyle = { width: 600, height: 20, marginLeft: 100 };
     const menu = (