Floating label on the input field

Topic: Floating label on the input field

Kotrakona pro asked 6 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?

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Kotrakona

Pro User 0Support score
1Questions 0Answers 0Snippets