Dropdown Form disappear on click


Topic: Dropdown Form disappear on click

wei.gu asked 5 years ago

Hi, I tried to follow the "Menu forms" example from here https://mdbootstrap.com/docs/vue/components/dropdowns/ while the demo on the website works fine but when loaded in MDB Editor OR locally in our project, the dropdown menu kept disappearing even when clicked inside the form

Expected behavior When clicked inside the dropdown form, the form needs to stay and allow user to complete the form, and only disappear when submit / cancel button is clicked.

Actual behavior Dropdown form disappears immediately on first click (anywhere) inside the form

Resources (screenshots, code snippets etc.)

<mdb-dropdown>
    <mdb-dropdown-toggle slot="toggle" color="secondary">Dropdown link</mdb-dropdown-toggle>
    <mdb-dropdown-menu>
      <form class="px-4 py-3">
        <div class="form-group">
          <label for="exampleDropdownFormEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
        </div>
        <div class="form-group">
          <label for="exampleDropdownFormPassword1">Password</label>
          <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
        </div>
        <mdb-input type="checkbox" id="checkbox1" label="Remember me" />
        <mdb-btn type="submit" color="primary">Sign in</mdb-btn>
      </form>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">New around here? Sign up</a>
      <a class="dropdown-item" href="#">Forgot password?</a>
    </mdb-dropdown-menu>
  </mdb-dropdown>

Magdalena Dembna staff premium answered 5 years ago

We've looked into this issue in 5.7.0 version - it seems that I overlooked code snippet on our website - we will update it as soon as possible. Updated example from demo app:

        <mdb-dropdown style="min-width: 400px" multiLevel>
          <mdb-dropdown-toggle slot="toggle" color="secondary">Dropdown link</mdb-dropdown-toggle>
          <mdb-dropdown-menu >
            <form class="px-2 py-2">
              <div class="form-group">
                <label for="exampleDropdownFormEmail1">Email address</label>
                <input
                  type="email"
                  class="form-control"
                  id="exampleDropdownFormEmail1"
                  placeholder="email@example.com"
                  @click.stop
                />
              </div>
              <div class="form-group">
                <label for="exampleDropdownFormPassword1">Password</label>
                <input
                  type="password"
                  class="form-control"
                  id="exampleDropdownFormPassword1"
                  placeholder="Password"
                  @click.stop
                />
              </div>
              <div class="custom-control custom-checkbox" @click.stop>
                <input type="checkbox" class="custom-control-input" id="12" @change="$emit('click', $event)">
                <label class="custom-control-label" for="12">Remember me</label>
            </div>
              <mdb-btn type="submit" color="primary">Sign in</mdb-btn>
            </form>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">New around here? Sign up</a>
            <a class="dropdown-item" href="#">Forgot password?</a>
          </mdb-dropdown-menu>
        </mdb-dropdown>

Let me know if this solution works, Kind regards, Magdalena


wei.gu commented 5 years ago

Thats perfect. Thanks Magdalena!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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