Topic: MDBInput - How to add a clear Icon on the right?

lpchwebservices free asked 4 years ago


Expected behavior Add a clear icon at the right side of the MDBInput Component which can be used to clear the content of the input field.

Actual behavior No sample code could be found Resources (screenshots, code snippets etc.)


Piotr Glejzer staff commented 4 years ago

Thanks for suggestion we will try to add an example with that.


Krzysztof Wilk staff answered 2 years ago


Hi!

You can add a clear icon to the input using i.e. code below:

        <MDBInput
          value={inputValue}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
        >
          <span tabIndex={0} className='select-clear-btn d-block' role='button' onClick={() => setInputValue('')}>
            βœ•
          </span>
        </MDBInput>

Keep coding!


Rossi20022022 priority answered 2 years ago


Do you have any example already?



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.5
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No