Topic: Autocomplete close is always triggered

Linga premium asked 1 year ago

Expected behavior

If we click anywhere in the body, nothing should be triggered related to Autocomplete.

Actual behavior

If I click in any place, outside the autocomplete area, the close method is always triggered. Even if I click on any labels, the autocomplete close method is triggered.

Resources (screenshots, code snippets etc.)

Linga premium answered 1 year ago

Well, its a problem.

Do you have any other solution to get the selected value in itemSelect()? In the same snippet, you will see selectAuto() function in which I added a timeout to take the value. With the v-model also, it takes time for the value to get updated.

Why there is a delay to get the selected value ? I need to trigger some other action as soon as the value is changed.

Bartosz Cylwik staff commented 1 year ago

You can create a watcher and listen for changes in input value (v-model). Please check my snippet where I used your code and added some console logs (value in selectAuto method and watch)

Linga premium commented 1 year ago

This should work but I want to prevent the user from entering a value which isn't in the options.I have 5000 options, let's say the user put "dfhDFH" which isn't there. In this case autocompleteBasic.value still has "dfhDFH" because the user hasn't selected anything. He just typed and left. I'd to clear it if the selection isn't made. I tried to do it on blur but blur called before the select. Timeout isn't the ideal way.

Linga premium commented 1 year ago

Can you confirm that, is mdbootstrap using typeahead package? We had the same issue with that package and wanted to get rid of that. It seems mdbvue is using the same.

Bartosz Cylwik staff commented 1 year ago

MDB Vue is not using te typeahead package. selectAuto method is called before v-model is updated so thats why you can't see the value in console log (yet). You can get the picked value by passing it as argument in selectAuto method or does it not do what you want? Other than that maybe vue nextTick method could be helpful? I updated the snippet.

enter image description here

Linga premium commented 1 year ago

What I want to do exactly is simple : If the user has entered a value other than the options, I'd like to clear it. In other words, the should only choose the options available. If they enter any other custom value, I want to clear it when the focus is lost or in some other way. Here is the jquery autocomplete link

Bartosz Cylwik staff commented 1 year ago

You can clear the value by listening to change event.

<MDBAutocomplete @change="checkIfValid" ...  />
const checkIfValid = () => {
        if (PartiesList.value.findIndex(item => item === autocompleteBasic.value) === -1) {
            autocompleteBasic.value = ""

Linga premium commented 1 year ago

It will not work if you have more options in the dropdown.

Keep your mounted as

mounted() {
            this.PartiesList = [];
  for(var i = 0; i < 10000; i++){
    this.PartiesList.push("Party " + (i+1));

and please filter by typing "Party 989" (Don't copy paste, just type) and then select "Party 9890". See what happens.

Bartosz Cylwik staff commented 1 year ago

If we want to use those values inside setup, we have to use onMounted hook. I called checkIfValid method inside the selectAuto => nextTick and it should be fine. Check my snippet.

Bartosz Cylwik staff answered 1 year ago

Hi, this is the intended behavior of the autocomplete component. If you think it should be changed, you can create a new feature request and then we will discuss this in our team. Best regards!

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 3.1.1
  • Device: Computer
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes