Topic: Dropdown Form disappear on click
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>
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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