How to prevent <sm-dropdown>from actually selecting an option

[snstarosciak]

Hey there,

I have some code where I'm utilizing the <sm-dropdown> component in order to list some buttons that correspond to certain actions. Right now, when I click on one of the options, it selects it, even though I'd like it to not do that. I've tried adding a return false to my button to hopefully prevent the bubbling up of the click event, but that doesn't seem to do the trick. Is there something I can do for this?

Here is my code:

<sm-dropdown title="Actions" class="floating icon button">
        <sm-item><button (click)="addPayment(requestId)"><i class="fa fa-credit-card"></i>Add payment</button></sm-item>
        <sm-item><button (click)="printRequestPDF(requestId)"><i class="fa fa-file-pdf-o"></i>Print Request</button></sm-item>
        <sm-item><button (click)="printRequestPDFWithAttachments(requestId)"><i class="fa fa-file-pdf-o"></i>Print Request &amp; Attachments</button></sm-item>
        <sm-item><button (click)="deleteRequest(requestId)"><i class="fa fa-times"></i>Delete</button></sm-item>
    </sm-dropdown>

Thanks in advance!

[martinmanzo]

Add [options]="{ action: 'hide' }", or the action that best suits your need, they are listed here https://semantic-ui.com/modules/dropdown.html#/settings.

<sm-dropdown title="Actions" class="floating icon button" [options]="{ action: 'hide' }">
    ...
</sm-dropdown>