Unsolved
1 Message
0
190
Actionmenu not closing on click of document
Hi Team, Not abel to close the action menu on click of document once i tis opened.
Using Vanilla DDS in angaulr project
Created a generic component and passing the template ref where ever needed.
Could you please help here.
dds styles are pointing to 2.28.0
@DDS components package is 2.30.0
Generic component
< div [id] = "name + '-trigger'"
[attr.data-action-menu-id] = "name + '-pop'"
[attr.aria-describedby] = "name + '-trigger-des'" >
< ng-template *ngIf = "actionTemplate" [ngTemplateOutlet] = "actionTemplate.template" [ngTemplateOutletContext] = "{
$implicit:row
}" >
ng-template>
div>
< div class = "dds__action-menu dds__action-menu--sm" data-dds = "action-menu"
[attr.data-trigger] = "'#'+name+'-trigger'" data-placement = "bottom-start"
[id] = "name +'-pop'" >
< div class = "dds__action-menu__container" tabindex = "-1" role = "presentation" aria-hidden = "true" >
< ng-template *ngIf = "itemTemplate" [ngTemplateOutlet] = "itemTemplate.template" [ngTemplateOutletContext] = "{
$implicit:row
}" >
ng-template>
div>
div>
passing template
< app-action [data] = "row" *ngIf = "!isReadOnlyRole" >
< ng-template actionMenuTemplate = "colactionMenu" data-placement = "bottom-start" >
< svg class = "dds__icon dds__th__button-icon" viewBox = "0 0 32 32" aria-hidden = "true" focusable = "false" >
< path d = "M14.34 21.66h3.32v3.34h-3.32zM14.34 14.34h3.32v3.32h-3.32zM14.34 7h3.32v3.34h-3.32z" >
path>
svg>
ng-template>
< ng-template actionMenuItemTemplate = "colactionMenuItem" let-actionvalue >
< ul class = "dds__action-menu__menu" role = "menu" tabindex = "-1" >
< li *ngIf = "row.type==='RunOnceNow'" class = "dds__action-menu__item" role = "none" >
< button type = "button" role = "menuitem" tabindex = "-1" aria-disabled = "false" aria-checked = "false"
(click) = "runAgain(row)" id = "ddsBtnRunAgain" >
< span > Run Again span>
< svg _ngcontent-djh-c135 = "" viewBox = "0 0 32 32" aria-hidden = "true" focusable = "false" class = "dds__icon dds__action-menu__check" >
< path _ngcontent-djh-c135 = "" d = "M11.86 26.12l-11.86-11.5 1.42-1.48 10.46 10.16 18.72-17.42 1.4 1.5z" > path>
svg>
button>
li>
< li class = "dds__action-menu__item" role = "none" >
< button type = "button" role = "menuitem" tabindex = "-1" aria-disabled = "false" aria-checked = "false"
(click) = "edit(row.id,row.name,row.type)" id = "ddsBtnEdit" >
< span > Edit span>
< svg _ngcontent-djh-c135 = "" viewBox = "0 0 32 32" aria-hidden = "true" focusable = "false" class = "dds__icon dds__action-menu__check" >
< path _ngcontent-djh-c135 = "" d = "M11.86 26.12l-11.86-11.5 1.42-1.48 10.46 10.16 18.72-17.42 1.4 1.5z" > path>
svg>
button>
li>
< li class = "dds__action-menu__item" role = "none" >
< button type = "button" role = "menuitem" tabindex = "-1" aria-disabled = "false" aria-checked = "false"
(click) = "openDialog(row.id, row.name)" id = "ddsBtnDelete" >
< span > Delete span>
< svg _ngcontent-djh-c135 = "" viewBox = "0 0 32 32" aria-hidden = "true" focusable = "false" class = "dds__icon dds__action-menu__check" >
< path _ngcontent-djh-c135 = "" d = "M11.86 26.12l-11.86-11.5 1.42-1.48 10.46 10.16 18.72-17.42 1.4 1.5z" > path>
svg>
button>
li>
ul>
ng-template>
app-action>