Unable to select a menu item when you have to scroll down (big issue)

[tbl0605]

Hi, when the dropdown menu contains a big number of items, it happens that you have to scroll down (with the mouse) to show the items that are "below the screen". When you try to select an item that was not firstly visible on screen, the focus will jump back on the input (by automatically scrolling up) but the selected item value will not not inserted in the input field! That's a really big issue.

You can see it directly on the demo at https://kazanexpress.github.io/vue-simple-suggest/ Simply reduce the height of your navigator, scroll down with the mouse and try to select an item that was not initially visible on screen.

You can also try my demo from issue #441 at https://codesandbox.io/s/demo-french-cities-vue-simple-suggest-qru7e

In my screenshots, you can see that I selected the item "54370 PARROY", that the page scrolled up but that the value was not inserted in the input field:

[kaskar2008]

Hello @tbl0605 I can confirm the issue. But I think it won't be a quick fix due to the core concept of selecting elements. We should discuss how we will solve this problem, though.

[tbl0605]

Yes with pleasure. Because at first look, I haven't found the problem in your code :S

[tbl0605]

Meanwhile I found an easy workaround to fix the problem. In vue-simple-suggest.vue I replaced

          setTimeout(() => {
            this.inputElement.focus()
          }, 0)

by

          setTimeout(() => {
            this.inputElement.focus()
          }, 200)

Maybe the focus() code should be moved inside suggestionClick(suggestion, e), but that's just a guess for now.

[tbl0605]

Hi @kaskar2008, could you have a look at fix for this issue and for issue #463 please?

Thank you!