Hi, this is a similar issue like here: https://mdbootstrap.com/support/nested-carousel-inside-tab-pane/, so this tabs problem is a Bootstrap bug but it’s fixed already in Bootstrap 4 beta-2. Now we are working on MDB update that contains the latest version of Bootstrap. Best, Marta

---

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>

 

---

I have run into this same problem. I have multiple tab panes with multiple inputs on each tab pane. All the inputs belong to a parent form that the tabs-wrapper is a child of. After endless hours of exploring why content from the last 2 tab panes show up in the the other tabs once visited, i found that it happens when you add the value attribute  to an input element.  I removed all the value attributes from all the inputs and the problem went away. However, not being able to set a value to an input element??? Not very useful.  Any ideas on how to fix this?    

---

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

---