Merge pull request #555 from facultyai/dropdownmenuitem-toggle

Dropdownmenuitem toggle

Author: tcbegley

src/components/dropdownmenu/DropdownMenu.js

@@ -153,7 +153,7 @@ DropdownMenu.propTypes = {
 
   /**
    * Set the color of the DropdownMenu toggle. Available options are: 'primary',
-   * 'secondary', 'success', 'warning', 'danger', 'info', 'link' or any valid CSS 
+   * 'secondary', 'success', 'warning', 'danger', 'info', 'link' or any valid CSS
    * color of your choice (e.g. a hex code, a decimal code or a CSS color name)
    * Default: 'secondary'
    */

src/components/dropdownmenu/DropdownMenuItem.js

@@ -48,6 +48,7 @@ const DropdownMenuItem = props => {
       href={disabled ? null : href}
       disabled={disabled}
       target={useLink && target}
+      toggle={toggle}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined

src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js

@@ -120,4 +120,22 @@ describe('DropdownMenuItem', () => {
       dropdownMenu.container.querySelector('.dropdown-menu')
     ).not.toHaveClass('show');
   });
+
+  test("doesn't dismiss parent DropdownMenu when clicked if toggle=false", () => {
+    const dropdownMenu = render(
+      <DropdownMenu label="toggle">
+        <DropdownMenuItem toggle={false}>Clickable</DropdownMenuItem>
+      </DropdownMenu>
+    );
+
+    userEvent.click(dropdownMenu.getByText('toggle'));
+
+    expect(dropdownMenu.container.querySelector('.dropdown-menu')).toHaveClass(
+      'show'
+    );
+    userEvent.click(dropdownMenu.getByText('Clickable'));
+    expect(
+      dropdownMenu.container.querySelector('.dropdown-menu')
+    ).toHaveClass('show');
+  });
 });