Topic: Strange focusing behaviour with multiple form in same page
Expected behavior I have two different forms in my page (on different components). Each form has a mdbInput control. When the two forms are visibile in the page I expect to click on the first mdbInput and the input gets focused.
Actual behavior Instead always the second mdbInput gets focused instead.
Resources (screenshots, code snippets etc.) I've already tried changing the IDs of the form and the controls but nothing. I can't figure out why the forms are behaving so strangely.
We will take a closer look at the problem with Angular snippets. I used your example and changed the code syntax to the one used in MDB5 Angular, but I could not reproduce the described problem.
Here is the code I used. Does the code used in your application is different?
<mdb-sidenav-layout>
<mdb-sidenav #sidenav="mdbSidenav" [mode]="'side'">
<ul class="sidenav-menu">
<mdb-form-control>
<input mdbInput type="text" id="form1" class="form-control" />
<label mdbLabel class="form-label" for="form1">Example label</label>
</mdb-form-control>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 1</span>
</a>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span>
</a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span>
</a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 3</span>
</a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 6</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 4</span>
</a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 7</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 8</a>
</li>
</ul>
</mdb-sidenav-item>
</ul>
</mdb-sidenav>
<mdb-sidenav-content #sidenavContent>
<!-- Toggler -->
<button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
<i class="fas fa-bars"></i>
</button>
<mdb-form-control>
<input mdbInput type="text" id="form2" class="form-control" />
<label mdbLabel class="form-label" for="form2">Example label</label>
</mdb-form-control>
<!-- Toggler -->
</mdb-sidenav-content>
</mdb-sidenav-layout>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 2.3.0
- Device: Desktop
- Browser: Chrome
- OS: MacOS Monterey
- Provided sample code: No
- Provided link: No
develcti priority commented 2 years ago
I'm using the second form inside a sidenav. When the sidenav mode is set to "over" (default value) the components tries to keep the focus always on the sidenav (and its form), even if the backdrop is set to false. I think this is a strange behaviour since there is no backdrop that force the use to stay on that sidenav.
Arkadiusz Idzikowski staff commented 2 years ago
Could you please provide more information about reproduction steps and an example HTML/TS code? It would help us to reproduce the problem on our end, we want to make sure we recreate it using a similar configuration.
develcti priority commented 2 years ago
Hi, I'm not able to use PRO MdBootstrap with Angular inside the Playgroud (there is something wrong with the bundle, it does not compile, it should be fixed..). The only thing I was able to create is a version with the Javascript Plain version (https://mdbootstrap.com/snippets/standard/develcti/4438963) but it appears that the behaviour does not reproduce with this library version.