Add Ability to programmatically Blur MDBAutocomplete


Topic: Add Ability to programmatically Blur MDBAutocomplete

NoahConn pro asked 2 years ago

Expected behavior

I am programmatically populating MDBAutocomplete with data when the component is mounted.

I have the ability to close the drop with: autocomplete.value.close()

But this leaves the component's input field still focused and using: autocomplete.value.blur() throws an error: autocomplete.value.blur is not a function

Resources (screenshots, code snippets etc.)


Bartosz Cylwik staff answered 2 years ago

Hello! You can remove the focus by finding the input via querySelector or getElementById and then using blur, for example:

...
autocomplete.value.close()
document.getElementById("clearFocus").blur()
...

I hope it will be useful. Best Regards!


NoahConn pro commented 2 years ago

Thank you for the response, unfortunately blurring the input this way leaves the border styling in place, which makes the input appear to be focused to the user. I'm looking for a way to revert the input border back to its blurred state.


Bartosz Cylwik staff commented 2 years ago

I made a snippet where on enter you can blur the autocomplete input. Could you check if my solution works for you? If it still doesn't work could you recreate that in a 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 Vue
  • MDB Version: -
  • Device:
  • Browser:
  • OS:
  • Provided sample code: No
  • Provided link: No