From 372cf202f82357325901ae1906184bec5d4dc13f Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 29 Jul 2020 18:19:43 -0400
Subject: [PATCH] apply on-click-inside modifier to dropdown component

---
 addons/rose/addon/components/rose/dropdown.js       |  8 +++++---
 .../addon/templates/components/rose/dropdown.hbs    |  2 +-
 .../integration/components/rose/dropdown-test.js    | 13 +++++++++++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown.js b/addons/rose/addon/components/rose/dropdown.js
index 07e9ba14b..4e6ffea81 100644
--- a/addons/rose/addon/components/rose/dropdown.js
+++ b/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;
   },
 });
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 51b429435..c65c640ba 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/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")
diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js
index 4d9ce49d0..3d4597c95 100644
--- a/addons/rose/tests/integration/components/rose/dropdown-test.js
+++ b/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);
+  });
 });