accordion click inside a stepper will wrongly submit form


Topic: accordion click inside a stepper will wrongly submit form

Tobias.Weber pro premium priority asked a year ago

Expected behavior If i click on an accordion element only the content of the accordion should be expanded.

Actual behavior If i click on an accordion element the submit of the form will be triggered see my eample snippet.

Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/vue/tobias-weber/5620005


Bartosz Cylwik staff answered a year ago

Hi! The buttons inside MDBAccordionItem doesn't have type="button" set, thats why the submit is happening. I'll add this issue to our list, to check why it isn't there.

As a workaround, you can add the type="button" property when the component is beeing mounted. Looks like it works and it's preventing the submit to be triggered

onMounted(()=>{
  document.querySelectorAll(".accordion-button").forEach(item=>item.type="button")
})

Best Regards!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 4.0.0
  • Device: Chrome
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes