javascript - Prevent materializecss dropdown to close when clicking inside it

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

Dropdown has option to close by:

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

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

Dropdown has option to close by:

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

Share Improve this question asked Oct 5, 2016 at 8:23 Plavookac 4201 gold badge9 silver badges24 bronze badges

You shouldn't use a dropdown at all for this type of action. A dropdown is meant to select one item from a list of items, not pose entire forms. A better alternative is to make a button that presents a form modal or emulates a dropdown as needed. – ironicaldiction Commented Oct 5, 2016 at 9:52
1 This has been fixed as of version 1.0.0. When initializing the dropdown, you can specify closeOnClick: false. materializecss./dropdown.html#options – pmalbu Commented Dec 9, 2018 at 4:28

Add a ment |

3 Answers 3

Sorted by: Reset to default 7

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.

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.

use this "closeOnClick : false" on dropdown initializing

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