Input field mouse click not working properly on tabs

Topic: Input field mouse click not working properly on tabs

ADS@Aareon pro asked 5 years ago

There is a bug on the input fields when they are on a tab. Input fields on another tab then the default tab respond different to mouse clicks.

On the default tab input fields respond as expected, you click on the label/placholder of an empty field and the animation starts and the label moves to the top.

When you switch to another tab the input field don't respond if you click the label/placeholder, you have to click below the label to make it respond.

This is very annoying and an actual bug report from one of our customers. Could you please fix this and/or provide a workaround of some sort?

We are using the angular version of mdbootstrap, but the behaviour is similar in the standard/javascript/jquery version. I have made a codepen to demonstrate the effect https://codepen.io/RichardScholten/pen/XOLgqd

(switch back and forth between the tabs on loading the page to see first tab, issue with codepen)

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Dear ADS@Aareon,</p>

<p>There is no bug with our inputs/tabs. In your CodePen code, there's duplicated identifiers for the input and its label. Please use the unique id for two inputs, and you'll see that there's no problem.</p>

<p>Please check the below Angular code. There is no such problem when input id's are unique, but the problem appears when you change the <code>input2</code> id to the<code>input1</code> id.</p>

<pre class="prettyprint"><code><div class="container">
  
  <mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-3'" [contentClass]="'card'">
    
    <mdb-tab heading="Profile">
      <div class="row">
        <div class="col-12">
          <div class="md-form">
            <input type="text" id="input1" class="form-control" mdbInput>
            <label for="input1">Label</label>
          </div>
        </div>
      </div>
    </mdb-tab>
    
    <mdb-tab heading="Follow">
      <div class="row">
        <div class="col-12">
          <div class="md-form">
            <input type="text" id="input2" class="form-control" mdbInput>
            <label for="input2">Label</label>
          </div>
        </div>
      </div>
    </mdb-tab>
    
    <mdb-tab heading="Contact">
      <div class="row">
        <div class="col-12">
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
            reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
            porro voluptate odit minima.</p>
        </div>
      </div>
    </mdb-tab>
  </mdb-tabset>
</div>
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

Dear ADS@Aareon,

There is no bug with our inputs/tabs. In your CodePen code, there's duplicated identifiers for the input and its label. Please use the unique id for two inputs, and you'll see that there's no problem.

Please check the below Angular code. There is no such problem when input id's are unique, but the problem appears when you change the input2 id to theinput1 id.

.html:

<div class="container">
  <!-- Nav Tabs -->
  <mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-3'" [contentClass]="'card'">
    <!--Panel 1-->
    <mdb-tab heading="Profile">
      <div class="row">
        <div class="col-12">
          <div class="md-form">
            <input type="text" id="input1" class="form-control" mdbInput>
            <label for="input1">Label</label>
          </div>
        </div>
      </div>
    </mdb-tab>
    <!--Panel 2-->
    <mdb-tab heading="Follow">
      <div class="row">
        <div class="col-12">
          <div class="md-form">
            <input type="text" id="input2" class="form-control" mdbInput>
            <label for="input2">Label</label>
          </div>
        </div>
      </div>
    </mdb-tab>
    <!--Panel 3-->
    <mdb-tab heading="Contact">
      <div class="row">
        <div class="col-12">
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
            reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
            porro voluptate odit minima.</p>
        </div>
      </div>
    </mdb-tab>
  </mdb-tabset>
</div>

Best Regards,

Damian

ADS@Aareon pro commented 5 years ago

Ah...sometimes you just miss the obvious :)

thank you

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 7.0.0
Device: macbook pro
Browser: chrome
OS: macOS
Provided sample code: No
Provided link: Yes

ADS@Aareon

Pro User 29Support score
8Questions 1Answers 0Snippets