diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs index c4f8dec52..5d02e87e8 100644 --- a/addons/rose/addon/components/rose/dropdown/index.hbs +++ b/addons/rose/addon/components/rose/dropdown/index.hbs @@ -22,15 +22,28 @@ -
- {{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") - )}} -
+ {{#if @ignoreClickInside}} +
+ {{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") + )}} +
+ {{else}} +
+ {{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") + )}} +
+ {{/if}} diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx index 77cd40c4c..58a0575bf 100644 --- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx +++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx @@ -66,7 +66,7 @@ A simple dropdown component with support for links and buttons. {{ template: hbs` - + <:key>Name <:value>Key/Value @@ -143,3 +143,14 @@ form field. ``` + +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 + + + <:key>ID + <:value>cl_nbv9375hLHs + + +``` diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index e831f2e6a..ed8345c31 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -2,6 +2,7 @@