apply on-click-inside modifier to dropdown component

addons/rose/addon/components/rose/dropdown.js

@@ -12,13 +12,15 @@ export default Component.extend({
 
   /**
    * Closes the details element by setting its `open` attribute to `false`.
-   * While the details element handles open/close functionality without
-   * JavaScript, we include this helper action to ensure that when the user
-   * clicks _outside_ of the element, it still closes.
+   * While the details element handles open/close functionality when clicking
+   * directly on the summar elemenet without JavaScript, we include this helper
+   * action to ensure that when the user clicks _outside_ of the element,
+   * or _inside_ the content, it still closes.
    * @param {HTMLElement} element
    */
   @action
   close(element) {
     if (element.open) element.open = false;
+    if (element.parentElement.open) element.parentElement.open = false;
   },
 });

addons/rose/addon/templates/components/rose/dropdown.hbs

@@ -22,7 +22,7 @@
 
   </summary>
 
-  <div class="rose-dropdown-content">
+  <div class="rose-dropdown-content" {{on-click-inside this.close}}>
     {{yield (hash
       link=(component "link-to" class="rose-dropdown-link")
       button=(component "rose/button" style="dropdown")

addons/rose/tests/integration/components/rose/dropdown-test.js

@@ -67,4 +67,17 @@ module('Integration | Component | rose/dropdown', function (hooks) {
     await click('#wrapper');
     assert.notOk(find('#dropdown').open);
   });
+
+  test('it is closed when inside content is clicked', async function (assert) {
+    await render(hbs`
+      <Rose::Dropdown as |dropdown|>
+        <dropdown.button>Button</dropdown.button>
+      </Rose::Dropdown>
+    `);
+
+    await click('summary');
+    assert.ok(find('.rose-dropdown').open);
+    await click('button');
+    assert.notOk(find('.rose-dropdown').open);
+  });
 });