Dropdown Form disappear on click

Topic: Dropdown Form disappear on click

wei.gu free asked 4 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>

Add comment

Magdalena Dembna staff answered 4 years ago

0 0 Best answer

<p>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:</p>

<pre class="prettyprint"><code>        <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>
</code></pre>

<p>Let me know if this solution works, 
Kind regards,
Magdalena</p>

Please insert min. 20 characters.

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 free commented 4 years ago

Thats perfect. Thanks Magdalena!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

wei.gu

5Support score
1Questions 0Answers 0Snippets