Prevent materializecss dropdown to close when clicking inside it

Question

I am using Materialize.css for current project, and I have dropdown with some input forms inside it.

Dropdown has option to close by:

• clicking outside of .dropdown-content
• clicking inside of .dropdown-content
• clicking on .dropdown-button

What I need is to not close when clicking inside of it, because i need to be able to fill in input forms and other actions.

Here is simple example

Answer 1

Quick solution would be to stopPropagation on click on content wrapper.

$('.dropdown-button + .dropdown-content').on('click', function(event) {
  event.stopPropagation();
});

I would avoid using 'dropdown' for this particular use-case. But if you want to stick to it just apply the snippet above.

Answer 2

You can use for example:

$('#first_name').click(function (event) {
    event.stopPropagation();
    //Do whatever you want
});

to avoid the event generated by the input first_name from propagating. The dropdown will not detect it so it will not be closed.

Answer 3

use this "closeOnClick : false" on dropdown initializing

$(".dropdown-trigger").dropdown({
    closeOnClick : false          
});