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.
Answered
- User: Pro
- Premium support: Yes
- Technology: Angular
- MDB Version: 9.4.0
- Device: Desktop
- Browser: All
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes