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 Item four ``` + +### 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 + + + + +``` \ 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('', () => { }); }); + 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( + + Hello, world! + , 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