CMultiSelect - If user click on X to remove and CMultiSelect is inside <form />, page is submitted

Question

CMultiSelect - If user click on X to remove and CMultiSelect is inside <form />, page is submitted

matgenois opened this issue a year ago · 6 comments

Hi! And thank you for looking at my issue.
Has title mention, I have this weird issue where if the CMultiSelect is inside a

, the submit happens. I went in the html and it seems like the x button is missing type='button' since the default value of type is 'submit' :

If I add the type='button' manually on the button in the browser inspector, it works fine.

<template>          
  <CContainer fluid class="step-container py-2">
    <!-- no issue here -->
    <CFormMultiSelect id="customId"
        label="custom label"
        :options="getOptions()"
        v-model="customModel" />
    <form>
      <!-- issue here -->
      <CFormMultiSelect id="customId2"
        label="custom label 2"
        :options="getOptions()"
        v-model="customModel" />

Answer 1 · 2024-05-17T11:54:08.000Z

@matgenois which version of @coreui/vue-pro do you use?

Answer 2 · 2024-05-17T12:14:36.000Z

Bug is in 5.0.1 and 5.1.0

Answer 3 · 2024-05-17T12:26:24.000Z

@matgenois ok, I'm working on it.

Answer 4 · 2024-05-30T16:39:40.000Z

@matgenois fixed in v5.2.0

Answer 5 · 2024-05-30T16:45:21.000Z

Thank you!

Answer 6 · 2024-07-30T14:24:03.000Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions