javascript - Prevent materializecss dropdown to close when clicking inside it - Stack Overflow

admin管理员组

文章数量:1346336

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

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

• javascript
• jquery
• reactjs
• materialize

Share Improve this question Follow asked Oct 5, 2016 at 8:23 PlavookacPlavookac 42011 gold badge99 silver badges2424 bronze badges 2

• 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          
});

本文标签： javascriptPrevent materializecss dropdown to close when clicking inside itStack Overflow