Materialize css Modal - input issue

Question

I am trying to implement a modal which contains an input type text from a first modal, but the problem that the input field is deactivated once the second modal is triggered. Anyone know how could i solve this?

please find below Jsfiddle link for an example : Modals

<div id="modal2" class="modal">
<div class="modal-content">
  <h4>Modal Header</h4>
  <p>A bunch of text</p>
  <input type=text/>
</div>
<div class="modal-footer">
  <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
 </div>
  <div id="modal1" class="modal">
     <div class="modal-content">
       <h4>Modal Header</h4>
        <p>A bunch of text</p>
        <a class="waves-effect waves-light btn modal-trigger" href="#modal2">Modal</a>
   </div>
  <div class="modal-footer">
       <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
   </div>
  </div>
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>


 <script>
   $(document).ready(function () {
       $('.modal').modal();
   });
 </script>

Answer 1

I think the problem is the version you're using, the fastest solution was to change the version

From

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

To

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>