darrenjennings / vue-autosuggest

🔍 Vue autosuggest component.
https://darrenjennings.github.io/vue-autosuggest
MIT License
621 stars 91 forks source link

The `slot-scope` is outdated, should we replace it with new scope syntax? #201

Closed StephenChips closed 4 years ago

StephenChips commented 4 years ago

Hello, Darren Jennings.

Currently I used your component to achieve the autocomplete feature in my company's project. While it was very helpful, I've found some problems when using it.

  1. The component is still using the old "slot" syntax, which has been deprecated since Vue 2.6.0, as the doc said. Shall we use the new syntax?

  2. When I pressed down the mouse on the suggestion menu, the component triggered a 'blur' event. I think it is a mistake, for I hadn't release my mouse yet. I think it should be trigger after the mouse's released. There are other UI effects that will be triggered when the autocomplete's focus is lost (blur out). Such mistake let the effects begin in advance.

  3. When I pressed the key, the focus moves from the autocomplete to the next <input> tag. That was great. But I found the the suggestion menu was still open, until I clicked the web page manually, and that was not so perfect.

I am very happy to contribute to your project at the weekend. What shall I finish after modifing your code and creating pull request?

Best wishes.

darrenjennings commented 4 years ago
  1. The implementation does not need to change, simply use the slot syntax in your app. e.g. <vue-autosuggest v-slot="{ suggestion }">...</vue-autosuggest>
  2. The component blur event is happening on the input, this is expected.
  3. "When I pressed the key" What is "the key"? If you're talking about closing during @keydown.tab, then see comment here: https://github.com/darrenjennings/vue-autosuggest/issues/35#issuecomment-376326806 which solves this problem