BUG: MDBInput onBlur() causes label to overlap value


Topic: BUG: MDBInput onBlur() causes label to overlap value

web_ntx premium asked 3 years ago

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)}
    />
  );
}

Krzysztof Wilk staff answered 3 years ago

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!


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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No