Topic: Angular Outline Text Input doesn't respond/focus to click on label text
Zachary Bell free asked 2 years ago
When a user clicks anywhere on an outline text input, the input gets focus and responds by moving the label text up out of the way and the cursor goes to the beginning of the input to accept the user keyboard inputs.
When a user clicks the label/placeholder text within the outline text input, the input does not get focus or respond in any way, like it was never clicked. However, if the user clicks the blank space next to label/placeholder text the input gets focus and responds correctly.
Resources (screenshots, code snippets etc.)
Gif of the problem: https://media.giphy.com/media/vTmxlvDtXM6WR7dAI1/giphy.gif
Code for the second input in the gif above
<div class="md-form md-outline"> <input mdbInput type="number" id="nameFilter" class="form-control" autocomplete="off" /> <label for="nameFilter">Search Social Security</label> </div>
Arkadiusz Idzikowski staff answered 2 years ago
@Zachary Bell I think you used the same id for both inputs. In this case, even if you click on the label of the second input, the directive tries to lift the label of the first input.
Please make sure to use unique names for the
for attributes in every input.
Zachary Bell free commented 2 years ago
Okay so that is the case for this one. I am being told by a fellow developer that he has a case with this happening but the ids are correct. However he too busy to send me to info right now. So I will close this issue since I can't add anything further. Thanks for your help!
This topic is closed.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.4.0
- Device: Desktop
- Browser: All
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes