Clarity tab overflow button submits form

Question

I have a form containing tabs with some of the tabs in overflow. When the overflow button is clicked to expose the hidden tabs, it submits the form. Looking at the DOM, I can see that the overflow button is not given a type="button", therefore it submits. Suggestions?

Simplified Example:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <button type="button" clrTabLink (click)="tabClicked($event)">General</button>
    <ng-template [(clrIfActive)]="generalTabActive">
      <clr-tab-content id="content1" *clrIfActive>
        <div>Tab content here</div>
      </clr-tab-content>
    </ng-template>
    <clr-tab>
      <button type="button" clrTabLink [clrTabLinkInOverflow]="inOverflow" (click)="tabClicked($event)">Overflow Tab Here</button>
      <clr-tab-content *clrIfActive>
        <div>Overflow tab content here</div>
      </clr-tab-content>
    </clr-tab>      
</form>

Answer 1

This is a bug on our side, I just reported it here: https://github.com/vmware/clarity/issues/2214 It's a very easy fix, it should be quick.

Thanks for raising this. :-)

EDIT: Thanks to Aditya's reactivity, it was fixed this morning and will go in today's release. So all you need to do is move to Clarity 0.11.15 and this toggle will stop submitting the form.