prevent select propogation

Topic: prevent select propogation

aztecadmin priority asked 1 year 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 1 year 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 1 year 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 1 year 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?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Opened

Specification of the issue

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

aztecadmin

5Support score
9Questions 1Answers 4Snippets