Topic: Input field mouse click not working properly on tabs
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)
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: 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