Tabs in combination with forms

I hope the staff at MDB can comment on this with some insight. Using the Classic Tabs from https://mdbootstrap.com/components/tabs/ example. The following code will NOT work properly with the value attribute set on the input on pane 3. However if you remove the value attribute completely, all tabs work correctly. Why and how is the value attribute affecting the other tabs?

<form method="post" action="" id="contactadd">
  <!-- Nav tabs -->
  <div class="tabs-wrapper">
    <ul class="nav classic-tabs tabs-cyan" role="tablist">
      <li class="nav-item">
        <a class="nav-link waves-light active" data-toggle="tab" href="#panel1" role="tab">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel2" role="tab">Follow</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel3" role="tab">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel4" role="tab">Be awesome</a>
      </li>
   </ul>
 </div>
 <!-- Tab panels -->
 <div class="tab-content card">
 <!--Panel 1-->
 <div class="tab-pane fade in show active" id="panel1" role="tabpanel">
    <div class="md-form">
      <input type="text" id="fname" name="firstname" class="form-control">
      <label for="fname">First Name</label>
   </div>
 </div>
 <!--/.Panel 1-->

 <!--Panel 2-->
<div class="tab-pane fade" id="panel2" role="tabpanel">
  <div class="md-form">
    <input type="text" id="lname" name="lastname" class="form-control">
    <label for="lname">Last Name</label>
  </div>
</div>
<!--/.Panel 2-->

<!--Panel 3-->
<div class="tab-pane fade" id="panel3" role="tabpanel">
  <p>This belongs on Pane 3 - Contact</p>
  <div class="md-form">
    <input type="text" id="street" name="address" class="form-control" value="somevalue">
    <label for="street">Street</label>
  </div>
</div>
<!--/.Panel 3-->

<!--Panel 4-->
<div class="tab-pane fade" id="panel4" role="tabpanel">
  <p>This belongs on Pane 4 - Be awesome </p>
  <div class="md-form">
    <input type="text" id="citylabel" name="city" class="form-control">
    <label for="citylabel">City</label>
 </div>
</div>
<!--/.Panel 4-->

</div>
</form>

Hi,

could you send me the file with your code with this problem to m.szymanska@mdbootstrap.com? I'll try to help you. And if you downloaded MDB package from our website then you have free version and tabs are pro components, so they won't work within free version.

Best,

Marta