StopPropogation not working with Dropdown

[aloksoni11]

Hi,

I want to create a dropdown inside a form. but when I click on the dropdown-content area it's closes automatically, I tried stopPropogation() but it's not working. please help me solve it.
You can check my code from here.

[pwcreative]

I'm not sure a dropdown inside a form inside a dropdown button is an ideal solution. Why not use a modal? Or a sidenav? If you look at the docs, the dropdown button is really meant for a bunch of list items.

[accezar]

I have a similar issue. I can't prevent the dropdown from being closed when I want.
Even if you attach a listener to the document and stops the propagation, the dropdown still closes.
Seems like onCloseStarts will always be triggered.
How can I prevent it from closing?

[pwcreative]

@accezar you need to replicate the issue in a codepen to be able to help.

[bugy]

I wanted to add an input field to a dropdown and dropdown was closing automatically.
So as a workaround:

• I disabled dropdown closeOnClick
• Added custom dropdown click listener, which closes dropdown when I want to

(it doesn't affect clicking outside of dropdown)

Here is the example for select field:

const comboboxWrapper = M.FormSelect.init($('.my-select-field'),
    {
        dropdownOptions: {
            closeOnClick: false
        }
    })[0];

const autoclose = (e) => {
    // This is my custom condition, when I want to prevent auto-close
    const closest = $(e.target).closest('.input-field');
    if (closest.hasClass('dropdown-input')) {
        return;
    }

    // This is default close behaviour, from dropdown.js
    setTimeout(() => {
        comboboxWrapper.dropdown.close();
    }, 0);
    comboboxWrapper.dropdown.isTouchMoving = false;
};
// capture: true is important, otherwise event is consumed by children and never 
comboboxWrapper.dropdownOptions.addEventListener('click', autoclose, {capture: true});

You can have a different implementation, but the main idea is to disable default onClick implementation

Another option (I didn't try though), would be to add onOpenStart listener and raise Exception there, when you don't want to close it :)