ngbAccordion ClickEvent in ngbPanelTitle not working in Firefox

Bug description:

If you provide an clickEvent within an ngbPanelTitle template, this clickEvent is triggered in Chrome, Edge, Safari (in my opion correct) but not in Firefox.

I’m building a menu like accordion in an angular6 application. If the menu have children (submenu) than the accordion is supposed to open, if the menu item hasn’t any children only the title is used with clickEvent to the page I want to open.

I saw that there were some accordion changes with version 3.1.0 of ng-bootstrap. You changed there some markup with buttons, etc.Please let me know if there is an another ways to make a special clickEvent on an accordion title and prevent the default to open up the content part.

Link to minimally-working StackBlitz that reproduces the issue:

See console.log in both browsers. In Chrome “console.log” is set by menuClick(), in Firefox its not firing

Versions of Angular, ng-bootstrap and Bootstrap:

Angular 6, ng-bootstrap 3.2.2, bootstrap 4

Thx and best regards

2 thoughts on “ngbAccordion ClickEvent in ngbPanelTitle not working in Firefox

  1. can be considered as valid HTML because the has just text inside and no other attribute?

    Maybe, depending on how you read the specs… In any case @stretau is trying to have an interactive element inside a title that is rendered using a <button> tag and I don’t think we should recommend users to go down this path – it is just too easy to shoot yourself in a foot.

    A proper solution will come from #465 / #717 hence closed as a duplicate.