Suggestion Box instantly re-opens in select mode after select

[cilice]

I'm submitting a ...

• [x] bug report
• [ ] feature request
• [ ] support request

What is the current behavior?

When in select mode, the suggestion box re-opens after the first select.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

1. Open https://kazanexpress.github.io/vue-simple-suggest/
2. Click on select mode
3. type "abc"
4. click on the suggestion
5. "abc" becomes selected
6. Suggestion box instantly re-opens

What is the expected behavior?

Step 6 shouldn't happen

How are you importing Vue-simple-suggest?

• [ ] ESNext (original code, single-file .vue component, css included) (import VueSimpleSuggest from 'vue-simple-suggest/lib')
• [x] ES6 (import VueSimpleSuggest from 'vue-simple-suggest')
• [ ] ES7 and above (import VueSimpleSuggest from 'vue-simple-suggest/dist/es7')
• [ ] Bundled version (import VueSimpleSuggest from 'vue-simple-suggest')
• [ ] CommonJS (const VueSimpleSuggest = require('vue-simple-suggest'))
• [ ] UMD Component (<script type="text/javascript" src="https://unpkg.com/vue-simple-suggest"></script>)

What is the motivation / use case for changing the behavior?

This has landed as a bug for our customer

Please tell us about your environment:

• Vue.js Version: 2.5.0
• Vue-simple-suggest version: 1.10.0
• Browser: Chrome 79, Fireofx 72
• Language: ES6

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[Raiondesu]

Hello, @cilice!

Thank you for submitting the issue, we're already in the process of fixing this.

[MikesGlitch]

I'm getting this as well. Anyone have a workaround?

[ghost]

Haven't worked out exactly why, but the value watcher is being triggered by the select event that's emitted here:

https://github.com/KazanExpress/vue-simple-suggest/blob/16291a4434f332ce6baca7164d83afa912a4a81b/lib/vue-simple-suggest.vue#L337

The value watcher calls updateTextOutside() which calls research() which finally calls showList() if it's in focus.

[ghost]

@CodeRevver I did find a workaround, since the list only appears when the box is in focus we just need to blur it on selection. In your template assign a ref to your input:

<vue-simple-suggest @select="onSelect">
    <input ref="myInputRef">
</vue-simple-suggest>

Then apply blur in your select method:

onSelect (item) {
    // do selection logic here...

    // apply blur at end
    this.$nextTick(() => {
      this.$refs.myInputRef.blur()
    })
}

It would be nice if this happened automatically though