Ngx-bootstrap: Expanding accordion causes forms to submit

[dlewis-ald]

Bug description or feature request:

Expanding accordion causes forms to submit.

The button within an accordion's heading does not have a type attribute defined, as as such, defaults to type submit in a web browsers. If an accordion resides within a a form element, then this will cause the form to submit unexpectedly when the user expands the form.

The ngx-bootstrap's markup does not adhere to Bootstrap's markup for accordions, which do specify type attribute.

https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example

Plunker/StackBlitz that reproduces the issue:

<form (submit)="submit()">
  <accordion>
    <accordion-group [heading]="More Info">
      <p>Ullamco est dolore quis ea nulla magna adipisicing nostrud eiusmod aute. Eiusmod
         nulla quis labore occaecat proident proident do aute est id. Commodo non excepteur
         duis cupidatat excepteur tempor sint in qui irure.</p>
    </accordion-group>
  </accordion>

  <div class="row">
    <div class="col-xs-6 text-left">
      <button type="reset" class="btn btn-primary">Cancel</button>
    </div>
    <div class="col-xs-6 text-right">
      <button type="submit" class="btn btn-primary">Save</button>
    </div>
  </div>
</form>

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 4.1.1

Angular: 7.2.14

Bootstrap: 3.3.7

Build system: Angular CLI, System.js, webpack, starter seed:

Angular CLI

[iwhp]

Workaround
enclose the <accordion> with a similarity div statement:

<div onclick="return false;">

[vanderdill]

Workaround
enclose the <accordion> with a similarity div statement:

<div onclick="return false;">

With this solution no click event, inside de accordion, will work.

[vanderdill]

Workaround:
Sets manually the accordion's buttons type to button:

ngAfterViewInit() {
        let accordions: HTMLCollection = document.getElementsByClassName("accordion-toggle");
        for (let i = 0; i < accordions.length; i++) {
            let div = accordions[i];
            for (let i = 0; i < div.childNodes.length; i++) {
                if (div.childNodes[i].nodeName == "BUTTON") {
                    (div.childNodes[i] as any).type = "button";
                }
            }
        }
    }

[kplates]

Can also use https://valor-software.com/ngx-bootstrap/#/accordion#custom-html to workaround.

I used <div accordion-heading>Accordion Title</div>

[thetric]

Another fix is to set the role in the accordion-heading:

<accordion>
  <accordion-group>
    <button class="btn btn-link" accordion-heading type="button">
      Tab 1
    </button>
  </accordion-group>
</accordion>

[thetric]

Fixed in #5314, the accordion and the date picker components now specify role="button"