Topic: Angular Outline Text Input doesn't respond/focus to click on label text

Zachary Bell priority asked 2 years ago


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>

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 id and for attributes in every input.


Zachary Bell priority 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!


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • User: Priority
  • 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