feat(Dropdown): Override toggle dropdown click inside (#205)

* Override toggle dropdown click inside
indiana-university · Aug 15, 2019 · 594f184 · 594f184
1 parent 6daefaa
commit 594f184
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git 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>
+```
diff --git 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
@@ -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;
         }