coreui/coreui-vue

Form in Dropdown dismissed when any element is clicked

saxelsen opened this issue · 1 comments

saxelsen commented

A CDropdown component with a CForm child component stopped working after upgrading @coreui/vue from version "~4.1.0" to "4.2.0" and above.

After upgrading to @coreui/vue > 4.1.0 (I tested with all minor versions from 4.2.0-4.5.0), when opening the dropdown and the form becomes visible, clicking anywhere in the form (including form input fields) closes the dropdown. This was also the case before upgrading, but was solving by adding @click.stop to the form input fields. After upgrading, this is no longer sufficient. The @click.stop handlers do not fire, so something else is causing the dismissal of the dropdown.

The affected code:

<CDropdown ref="dropdown" variant="nav-item">
        <CDropdownToggle class="py-0" :caret="false">
          <CButton color="light" shape="rounded-pill"> New </CButton>
        </CDropdownToggle>
        <CDropdownMenu ref="dropdownMenu" class="">
          <CForm class="px-4 d-flex flex-row" @submit.prevent="addClass">
            <div class="mx-2 my-auto">
              <CFormInput
                id="cName"
                v-model="formData.name"
                type="text"
                style="min-width: 200px"
                placeholder="Class name"
                @click.stop=""
                @keyup.stop=""
              />
            </div>
            <div class="mx-2 my-auto">
              <CFormInput
                id="cColor"
                v-model="formData.color"
                type="color"
                title="Choose your color"
                @click.stop=""
              />
            </div>
            <CButton color="light" class="mx-2 my-auto" shape="rounded-pill" type="submit"
              >Add</CButton
            >
          </CForm>
        </CDropdownMenu>
      </CDropdown>

System details:

  • Operating system: macOS Ventura 13.0.1
  • Browser: Firefox 107.0