scroll bar‏ for the popup menu

[Mishary457]

Hello all, Thanks for the tool. It is very useful. Is it possible to add a scroll bar to the suggested list if I want to show all the suggestions. Let's say I set the maxItems to really big number, and I don't want to have the drop down menu to be very long list without a scroll bar to control the appearance and to show all the suggestions that match with the user input while typing. Your answer is appreciated.

[Mishary457]

thanks for Lea Verou ✿ http://lea.verou.me ✿ @leaverou @vlazar vlazar I checked the developer tools, and found that it is awesomplete class. So, I checked awesomplete.css and found the following code. then, I added this line : overflow: auto; div.awesomplete { display: inline-block; position: relative; overflow: auto; } It worked fine. however, one thing is that once I click on the down arrow in the popup menu, it doesn't go down down with the highlighted option. So, I have to use the scroll bar.

[LeaVerou]

@vlazar To explain what's happening a bit more: The element doesn't scroll into view when highlighted. Do you think there's an easy way for him to work around it? Should we address this use case in the Awesomplete core is it too niche? Thoughts?

[Mishary457]

@vlazar there is one more issue. this command " sort: Array.prototype.sort(), " is not supported firefox

[vlazar]

I think it's somewhat relate to supporting <select> element out of the box. It makes more sense to have scroll for select-like autocomplete, but it can be useful to support it for general case too.

[Mishary457]

thanks,@leaverou and @vlazar ,for replying. One more issue is that when you submit your form and look at the results. Then, click back button. The popup doesn't work anymore.

[TxHawks]

If I understand the question correctly, this behavior is already pretty easy to achieve using the awesomplete-highlight event:

input.addEventListener('awesomplete-highlight', function(evt){
  if(input.querySelector('[aria-selected=true]')) element.scrollIntoView(false);
});

[fractaledmind]

The "scroll to selected item in dropdown" functionality can be achieved easily by adding one line to the goto method:

goto: function (i) {
    var lis = this.ul.children;

    if (this.selected) {
      lis[this.index].setAttribute("aria-selected", "false");
    }

    this.index = i;

    if (i > -1 && lis.length > 0) {
      lis[i].setAttribute("aria-selected", "true");
>     lis[i].scrollIntoView(false);
      this.status.textContent = lis[i].textContent;
    }

    Bliss.fire(this.input, "awesomplete-highlight");
  }

[LeaVerou]

We can't do this blindly though, we'd need to check if the container is actually scrollable. We don't want the entire page to jump around.

[vlazar]

Does scrollIntoView(false) has some quirks?

[Dejard]

"We don't want the entire page to jump around."

Found a fix for this issue. This is how my goto method looks like

  goto: function (i) {
    var lis = this.ul.children;

    if (this.selected) {
        lis[this.index].setAttribute("aria-selected", "false");
    }

    this.index = i;
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
    if (i > -1 && lis.length > 0) {
        lis[i].setAttribute("aria-selected", "true");
        lis[i].scrollIntoView(false);
        window.scrollTo(0, top);
        this.status.textContent = lis[i].textContent;
        // scroll to highlighted element in case parent's height is fixed 
        this.ul.scrollTop = lis[i].offsetTop - this.ul.clientHeight + lis[i].clientHeight;

        $.fire(this.input, "awesomplete-highlight", {
            text: this.suggestions[this.index]
        });
    }
}

Btw, thanks for this cool plugin.

[c80609a]

What if:

new Awesomplete(inputReference, {
    maxItems: 10500,
    ...
});

.awesomplete > ul {
    max-height: 410px;
    overflow-y: auto;
}

?

[MrBertie]

Further the comment above, the following also works very well: .awesomplete > ul { max-height: 80vh; overflow-y: auto; }

[dillydadally]

I've been using the method proposed by c80609a above (set a max height and overflow-y to auto), and it works other than one huge problem: if I click on the scrollbar with my mouse, it instantly closes the dropdown, so I can't actually use the mouse to click on the scrollbar at all. I assume this is because there's a click event Awesomplete puts on the dropdown that always closes the dropdown no matter what else happens.

My only idea was to use the awesomplete-close event to somehow check if the click target was the scrollbar and if so, prevent closing. Unfortunately, I couldn't find anyway to prevent closing the dropdown in the close event (and never even got far enough to see if I could detect the scrollbar as the target).

Does anyone have any idea how to solve this issue?

[c80609a]

What version is your browser?

Try Selectize, https://github.com/frappe/frappe/pull/4574

[dillydadally]

I'm using Chrome Version 66.0.3359.139 (Official Build) (64-bit). I hesitate to change my implementation too much at this point. Awesomplete is deeply ingrained into my app and I've been able to make it function literally perfect other than this single remaining issue.

I did a very simple implementation in jsfiddle and found out that this same behavior is not happening outside my app, so I assume that I must be causing it somehow. I'm now combing through my code to see what could be causing it and will report back.

[dillydadally]

I've discovered the issue. It appears to be a conflict between Awesomplete and Jquery UI's dialog widget. If I create an awesomplete on my page, I can click and scroll, but if I create an Awesomplete in a dialog window created by jquery ui, it will close the dropdown when you click on the scrollbar.

I know it's a long shot, but does anyone have any ideas why this might be happening?