Topic: Angular Outline Text Input doesn't respond/focus to click on label text
Expected behavior
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.
Actual behavior
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>
@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 id and for attributes in every input.
Zachary Bell pro premium priority commented 4 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!
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 9.4.0
- Device: Desktop
- Browser: All
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes