From 594f184d55857b1b000f7b412f8a3eb107dfe50e Mon Sep 17 00:00:00 2001
From: Jerry Neal <jkneal@indiana.edu>
Date: Thu, 15 Aug 2019 10:51:09 -0400
Subject: [PATCH] feat(Dropdown): Override toggle dropdown click inside (#205)

* Override toggle dropdown click inside
---
 src/components/Dropdown/Dropdown.md       | 11 ++++++++
 src/components/Dropdown/Dropdown.test.jsx | 33 +++++++++++++++++++++++
 src/components/Dropdown/Dropdown.tsx      |  6 +++--
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.md b/src/components/Dropdown/Dropdown.md
index 5fa53546..02d983d6 100644
--- a/src/components/Dropdown/Dropdown.md
+++ b/src/components/Dropdown/Dropdown.md
@@ -31,3 +31,14 @@ By default the dropdown menu is vertically aligned with the left edge of the dro
     <a href="#">Item four</a>
 </Dropdown>
 ```
+
+### Toggle On Click Inside Modifier
+
+By default the dropdown menu will not close when an item within the dropdown is clicked. Set the 'toggleDropdownOnClickInside' option to true to specify the dropdown should be closed in this case.
+
+```jsx
+<Dropdown label="Toggle On Click" toggleDropdownOnClickInside>
+    <Button variant="plain">Item one</Button>
+    <Button variant="plain">Item two</Button>
+</Dropdown>
+```
\ No newline at end of file
diff --git a/src/components/Dropdown/Dropdown.test.jsx b/src/components/Dropdown/Dropdown.test.jsx
index 1575db9c..f92a67d2 100644
--- a/src/components/Dropdown/Dropdown.test.jsx
+++ b/src/components/Dropdown/Dropdown.test.jsx
@@ -118,6 +118,39 @@ describe('<Dropdown />', () => {
         });
     });
 
+    describe('Toggle behavior click inside override', () => {
+
+        let cut;
+
+        const expectDropdownMenuIsOpen = () => {
+            expect(document.getElementsByClassName('rvt-dropdown__menu')).toHaveLength(1);
+        }
+
+        const expectDropdownMenuIsClosed = () => {
+            expect(document.getElementsByClassName('rvt-dropdown__menu')).toHaveLength(0);
+        }
+
+        const clickToggleButton = () => {
+            document.getElementsByTagName('button')[0].click();
+        }
+
+        beforeEach(() => {
+            ReactDOM.render(
+                <Dropdown toggleDropdownOnClickInside={true}>
+                    <a href="#">Hello, world!</a>
+                </Dropdown>, root
+            );
+        });
+
+        it('should toggle the menu when clicking inside the menu', () => {
+            expectDropdownMenuIsClosed();
+            clickToggleButton();
+            expectDropdownMenuIsOpen();
+            document.getElementsByTagName('a')[0].click();
+            expectDropdownMenuIsClosed();
+        });
+    });
+
     describe('Event handler registration', () => {
         
         afterEach(() => {
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index bfa3dbad..73eede4e 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -25,6 +25,8 @@ interface DropdownProps extends ButtonProps {
      * Optional CSS classes which will be applied to the dropdown menu
      */
     menuClass?: string;
+    /** Optional flag to toggle the dropdown open state when a click is done within the dropdown contents */
+    toggleDropdownOnClickInside?: boolean;
 }
 
 const initialState = { open: false }
@@ -59,7 +61,7 @@ export class Dropdown extends React.PureComponent<DropdownProps & React.HTMLAttr
     }
 
     public render() {
-        const { align, children, className, label, menuClass, ...attrs } = this.props;
+        const { align, children, className, label, menuClass, toggleDropdownOnClickInside = false, ...attrs } = this.props;
         const menuClasses = classNames({
             ['rvt-dropdown__menu']: true,
             [`rvt-dropdown__menu--${align}`]: !!align
@@ -101,7 +103,7 @@ export class Dropdown extends React.PureComponent<DropdownProps & React.HTMLAttr
             return false;
         }
 
-        if (event.targets(ReactDOM.findDOMNode(this)) && (!event.isKeyEvent() || event.isTabKeyPress())) {
+        if (event.targets(ReactDOM.findDOMNode(this)) && !this.props.toggleDropdownOnClickInside && (!event.isKeyEvent() || event.isTabKeyPress())) {
             // If the user clicks, touches or tabs inside the dropdown do not close the menu
             return false;
         }