mdl-textfield внутри mdl-menu material-design-lite

Question

Я пытаюсь использовать материал-дизайн-лист mdl-textfield внутри mdl-menu.

Проблема заключается в том, что когда я открываю меню и нажимаю текстовое поле (<input>), оно закрывает меню.

Кто-нибудь знает, как я могу предотвратить это без воссоздания/стилизации меню вручную?

Вот пример кода:

#button { 
 
    margin-left:20px; 
 
    margin-top:20px; 
 
}

<script src="https://code.getmdl.io/1.2.1/material.min.js"></script> 
 
<link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet"/> 
 

 

 
<button class="mdl-button mdl-js-button mdl-color--blue mdl-color-text--white" id="button"> 
 
    Open Menu 
 
</button> 
 
<ul for="button" class="mdl-menu mdl-js-menu"> 
 
    <li> 
 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
 
     <input class="mdl-textfield__input" type="text" id="sample3"> 
 
     <label class="mdl-textfield__label" for="sample3">Clicking here will close me :(</label> 
 
    </div> 
 
    </li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
</ul>

Update

решаемые это с быстрой угловой директивы:

.directive('stopPropagation', function() { 
    return { 
     restrict: 'A', 
     link: function($scope, $element) { 
      $element.on('click', function($event) { 
       $event.stopPropagation(); 
      }); 
     } 
    }; 
}); 

Answer 1

Попробуйте добавить обработчик события для поля ввода, в котором он предотвращает распространение события

document.querySelector('.mdl-textfield__input').addEventListener('click', function(e) {e.stopPropagation()});

См фрагмент ниже.

#button { 
 
    margin-left:20px; 
 
    margin-top:20px; 
 
}

<script src="https://code.getmdl.io/1.2.1/material.min.js"></script> 
 
<link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet"/> 
 

 

 

 
<button class="mdl-button mdl-js-button mdl-color--blue mdl-color-text--white" id="button"> 
 
    Open Menu 
 
</button> 
 
<ul for="button" class="mdl-menu mdl-js-menu"> 
 
    <li> 
 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
 
     <input class="mdl-textfield__input" type="text" id="sample3"> 
 
     <label class="mdl-textfield__label" for="sample3">Clicking here will close me :(</label> 
 
    </div> 
 
    </li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
</ul> 
 
<script>document.querySelector('.mdl-textfield__input').addEventListener('click', function(e) {e.stopPropagation()});</script>