feat: Allow dropdown items to be selectable without closing

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

@@ -22,15 +22,28 @@
 
   </summary>
 
-  <div class="rose-dropdown-content" {{on-click-inside this.close}}>
-    {{yield (hash
-      link=(component "rose/dropdown/link" style=this.style)
-      button=(component "rose/dropdown/button" style=this.style)
-      item=(component "rose/anonymous" class="rose-dropdown-item")
-      separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
-      section=(component "rose/dropdown/section" style=this.style)
-      key-value=(component "rose/dropdown/key-value")
-    )}}
-  </div>
+  {{#if @ignoreClickInside}}
+    <div class="rose-dropdown-content">
+      {{yield (hash
+        link=(component "rose/dropdown/link" style=this.style)
+        button=(component "rose/dropdown/button" style=this.style)
+        item=(component "rose/anonymous" class="rose-dropdown-item")
+        separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
+        section=(component "rose/dropdown/section" style=this.style)
+        key-value=(component "rose/dropdown/key-value")
+      )}}
+    </div>
+  {{else}}
+    <div class="rose-dropdown-content" {{on-click-inside this.close}}>
+      {{yield (hash
+        link=(component "rose/dropdown/link" style=this.style)
+        button=(component "rose/dropdown/button" style=this.style)
+        item=(component "rose/anonymous" class="rose-dropdown-item")
+        separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
+        section=(component "rose/dropdown/section" style=this.style)
+        key-value=(component "rose/dropdown/key-value")
+      )}}
+    </div>
+  {{/if}}
 
 </details>

addons/rose/addon/components/rose/dropdown/index.stories.mdx

@@ -66,7 +66,7 @@ A simple dropdown component with support for links and buttons.
 <Preview>
   <Story name="Dropdown with Key Value Items" height="13rem">{{
     template: hbs`
-      <Rose::Dropdown @text="View details" @showCaret={{showCaret}} as |dropdown|>
+      <Rose::Dropdown @text="View details" @showCaret={{showCaret}} @ignoreClickInside={{true}} as |dropdown|>
         <dropdown.key-value>
           <:key>Name</:key>
           <:value>Key/Value</:value>
@@ -143,3 +143,14 @@ form field.
   </form.radioGroup>
 </Rose::Form>
 ```
+
+Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with.
+
+```html
+<Rose::Dropdown @text="View details" @showCaret={{true}} @ignoreClickInside={{true}} as |dropdown|>
+  <dropdown.key-value>
+    <:key>ID</:key>
+    <:value>cl_nbv9375hLHs</:value>
+  </dropdown.key-value>
+</Rose::Dropdown>
+```

addons/rose/tests/dummy/app/templates/index.hbs

@@ -2,6 +2,7 @@
 <Rose::Dropdown
   @text="Credential library details"
   @showCaret={{true}}
+  @ignoreClickInside={{true}}
   as |dropdown|
 >
   <dropdown.key-value>