Topic: BUG: MDBInput onBlur() causes label to overlap value
Expected behavior
Use the onBlur() property to get the value of the <MDBInput/> when the input is unfocused. This has an advantage over using the onChange() property since it will not occur until the user is finished typing their input.
Actual behavior
Setting onBlur() property of <MDBInput/> causes the label to overlap user entered text.
Resources (screenshots, code snippets etc.)
import React from 'react';
import { MDBInput } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBInput
label='Text input'
id='typeText'
type='text'
onBlur={(e) => console.log(e)}
/>
);
}
Hi!
Thanks for reporting that bug. We'll fix it in the next release.
You can use the code below to temporary fix it :)
import React from 'react';
import { MDBInput } from 'mdb-react-ui-kit';
export default function App() {
const handleBlur = (e: any) => {
e.target.value === '' ? e.target.classList.remove('active') : e.target.classList.add('active');
console.log(e);
}
return (
<MDBInput
label='Text input'
id='typeText'
type='text'
onBlur={(e: any) => handleBlur(e)}
/>
);
}
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 1.0.0-beta6
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: Yes
- Provided link: No