Floating label on the input field

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Floating label on the input field

Kotrakona pro asked 7 years ago

I have an input field with a label. when I click on the input field the label is supposed to float to the top. This does happen but not consistently. when I click on the input field I have to be careful not to click on the label text. When I click on the text the label does not flow to the top. When I click just above the label text or outside the label text the label floats to the top. This seems to be happening with the MDB React version only. Here is how I am using the Input component: 
<div>
    <Input label="Your name" icon="user" group type="email" validate error="wrong" success="right"/>
</div>

The react components page @mdbootstrap.com does not seem to show the behavior. Why does this occur in MDB React Pro version?

Jakub Strebeyko staff answered 7 years ago

Hi there,

Welcome to the support board! Thanks for taking time to reach out! The bug is caused by the fact that the TextField component onFocus event listener checks the ref attribute before executing its state setting option to guard against focusing / blurring of the window (line 55). Since ref attribute is based on the what the component is (basically, it points at the node itself), clicking on label does not pass the condition set in place. The bug has been reported and shall be fixed in the upcoming releases of MDB React sometime soon.

With Best Regards,
Kuba

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Kotrakona
Pro User
0Support score
1Questions 0Answers
0Snippets likes 0Snippets