Materialize collapsible inside modal doesn't remain open

Question

I'm facing an issue with my collapsible, that make the collapsible-body to open/close several times very fast when I click on a collapsible-header element.

Here is the modal trigger:

<a class="btn modal-trigger" href="#myModal">Trigger</a>

Here is my modal structure: (note the use of ng-repeat, not sure if it might be linked)

  <div id="myModal" class="modal">
    <div class="modal-content" >
      <ul class="collapsible" data-collapsible='accordion' watch>
        <li>
          <div class="collapsible-header">FOO</div>
          <div class="collapsible-body">foo</div>
        </li>
        <li>
          <div class="collapsible-header">BAR</div>
          <div class="collapsible-body">bar</div>
        </li>
      </ul>
    </div>
  </div>

The script ending my HTML:

<script> 
    $(document).ready(function(){
        $('.modal-trigger').leanModal({
            ready: function(){
                $('.collapsible').collapsible()
            }
        });
    });
</script>

I've been browsing around without finding any related issue. Any help will be much appreciated (do not hesitate to ask for clarification).

Answer 1

Thanks Allan for your answer, Although it is not related to the height:

1. The modal automatically vertical-expands itselfs when item is opening.

2. Setting a large min-height doesn't solve my issue.