Topic: prevent select propogation
aztecadmin pro premium priority asked 2 years ago
Trying to prevent event propagation from a select element inside a form that is inside a dropdown menu.
Bulk Edit One Two Three Four Five Column
<!-- Password input -->
<div class="form-outline mb-4">
<input type="password" id="form1Example2" class="form-control" />
<label class="form-label" for="form1Example2">Password</label>
</div>
<!-- 2 column grid layout for inline styling -->
<div class="row mb-4">
<div class="col d-flex justify-content-center">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="form1Example3" checked />
<label class="form-check-label" for="form1Example3"> Remember me
</label>
</div>
</div>
<div class="col">
<!-- Simple link -->
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</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>
</div>
document.querySelector('.select-option').addEventListener('click', e => {
e.stopPropagation();
})
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: PC
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No
mlazaru staff commented 2 years ago
I think not all the code has been copied. I'm afraid stopPropagation or preventDefault won't prevent the option to be selected. But if you send me full code (for example in a snippet), maybe we will find a workaround.
aztecadmin pro premium priority commented 2 years ago
The javascript line is under the code text box. Not sure when it got separated. Right now this is all the code I have. With the select being replaced by an input with an unordered list I'm unsure how to stop the propagation.
mlazaru staff commented 2 years ago
I see the js code, but in the HTML there is no MDB Select, so
document.querySelector('.select-option')
returnsnull
.What is the expected result?