Angular 2 Checkbox preventDefault

Question

I am making a Bootstrap checkbox dropdown and the options is wrapped in an <a> tag that handles the click, but I also have a <input type="checkbox"> inside the a-tag.

My problem occurs when the user is pressing on the actual checkbox instead of just the <a> element. Both are clicked and some conflict happen. The checkbox checked-state should be inverted but isn't.

In Angular1 it worked to just use preventDefault() on the checkbox-click, but in my angular2-test it stops the checkbox from updating its state.

Need help with what I am doing wrong.

<ul>
    <li *ngFor="#option of options">
    <a href="" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
        <input type="checkbox" [checked]="isSelected(option)" (click)="checkboxClick($event)" /> {{ option.name }}
    </a>
  </ul>

Plunker: https://plnkr.co/edit/6D5GQ9mnaMALNnPzf5Na

I want the same behaviour when clicking on the checkboxes as clicking on the links to the right.

Günter Zöchbauer · Accepted Answer · 2016-03-15 17:12:34Z

14

Just add ;false to the event handler expression. Returning false results in preventDefault()

<input type="checkbox" [checked]="isSelected(option)" (click)="checkboxClick($event);false" /> {{ option.name }}

You get the same effect if you return false in checkboxClick()

answered Mar 15, 2016 at 17:12

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eesdil Over a year ago

I thought that the preventDefault is default in angular2, isn't it?

Günter Zöchbauer Over a year ago

This comment github.com/angular/angular/issues/7277#issuecomment-188938815 addressed to you :D says "@eesdil atm, we preventDefault on every event that gets dispatched to the WebWorker here. I don't believe we're stopping propagation though." => events that get dispatched to WebWorker

eesdil Over a year ago

Yes, I can see, thats right. Also checked the source code and they are checking the return value of the callback and not changing it. Memory...

micronyks · Accepted Answer · 2016-03-15 17:36:44Z

3

You should check this.

https://plnkr.co/edit/jyX1hGNlRk0dNsR0XMXU?p=preview

<ul>
    <li *ngFor="#option of options">
            <a href="#" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
            <input type="checkbox" [checked]="isSelected(option)" (keyup)="checkboxClick($event)" /> {{ option.name }}
            </a>
     </li>
</ul>

edited Mar 15, 2016 at 17:36

answered Mar 15, 2016 at 17:31

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

1 Comment

jonassvensson Over a year ago

Yes. Thank you. So I suppose the solution was to drop the "preventDefault" from the <a click event and instead add # to href="" to make it work.

eesdil · Accepted Answer · 2016-03-15 17:25:32Z

0

Why don't you use event.stopPropagation()? It is stopping the click to propagate from checkbox to the a click handler...

answered Mar 15, 2016 at 17:25

eesdil

2,0413 gold badges17 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular 2 Checkbox preventDefault

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related