CODEWITHSUNDEEP
jquerydropdownsemantic-uisemantic-ui-angularng2-semantic-ui
Char
Char

Reputation: 2133

$event.stopPropagation() not working in Angular 2

This was previously working. Is there something wrong with my html that caused this to stop working? The dropdown won't open. I've also tried $('.ui.dropdown).dropdown(); The menu would show up for like .1 second and then disappears.

<div class="list card ui">

    <div class="info">
        <div class="ui grid">
            <div class="three wide column">
                <div class="content">
                    <h4 class="ui image header"> {{product.name}} </h4>
                    <div class="sub header"> Product Number: {{product.productNumber}} </div>
                </div>
            </div>
            <div class="four wide column"> {{ product.client.name }} </div>
            <div class="one wide column"> {{ product.currentStatus.name }} </div>
            <div class="one wide column"> {{ sendInvoice }} </div>
            <div class="one wide column"> {{ approvalInvoice }} </div>
            <div class="two wide column"> {{ orderMail }} </div>
            <div class="two wide column"> {{ product.productPrice | number: '1.0-0' }} </div>
            <div class="two wide column"> {{ product.outSourcePrice | number: '1.0-0' }} </div>
        </div>
    </div>

    <div class="list-actions" (click)="$event.stopPropagation()">
        <div class="ui icon top right pointing dropdown">
            <i class="ellipsis horizontal icon"></i>
            <div class="menu">
                <div class="item" (click)="onView()"><i class="eye icon"></i> View </div>                    
                <div class="item" (click)="onEdit()"><i class="write icon"></i> Edit </div>
                <div class="item" (click)="onDelete()"><i class="trash icon"></i> Delete </div>
            </div>
        </div>
    </div>
    
</div>

Upvotes: 0

Views: 743

Answers (2)

ronenmiller
ronenmiller

Reputation: 1137

Without testing (not using semantic-ui), I think you are using the stop propagation in the wrong place. You have put it in the div that is wrapping the dropdown, therefore the dropdown is not getting the event. You should move the stop propagation to the dropdown itself like so:

<div class="list-actions">
        <div class="ui icon top right pointing dropdown" (click)="$event.stopPropagation()">
            <i class="ellipsis horizontal icon"></i>
            <div class="menu">
                <div class="item" (click)="onView()"><i class="eye icon"></i> View </div>                    
                <div class="item" (click)="onEdit()"><i class="write icon"></i> Edit </div>
                <div class="item" (click)="onDelete()"><i class="trash icon"></i> Delete </div>
            </div>
        </div>
    </div>

Upvotes: 0

Char
Char

Reputation: 2133

I added $('.ui.dropdown').dropdown(); in my ngOnInit() method

Upvotes: 0

Related Questions