Topic: prevent select propogation

aztecadmin priority asked 11 months 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(); })

Mateusz Lazaru staff commented 11 months 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 priority commented 11 months 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.


Mateusz Lazaru staff commented 11 months ago

I see the js code, but in the HTML there is no MDB Select, so document.querySelector('.select-option') returns null.

What is the expected result?



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • User: Priority
  • 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