Autocomplete close is always triggered

Bartosz Cylwik staff commented 2 years 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)

https://mdbootstrap.com/snippets/vue/b-cylwik/4723707#js-tab-view

infotigeensolutions-com pro premium commented 2 years 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.

infotigeensolutions-com pro premium commented 2 years 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 2 years 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.

infotigeensolutions-com pro premium commented 2 years 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 http://jsfiddle.net/689Uf/3/

Bartosz Cylwik staff commented 2 years ago

You can clear the value by listening to change event. https://mdbootstrap.com/snippets/vue/b-cylwik/4723707#js-tab-view

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

infotigeensolutions-com pro premium commented 2 years 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 2 years 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.