Suggestbox suggestions not displayed when navigating using arrow keys

[ALB-PSP-DV1]

We have a suggestbox with approx. 50 suggestions. We are displaying a
scrollbar for the suggestbox using the following css

.suggestPopupContent{
height:auto;
width:auto !important;
max-width:400px;
max-height: 165px;
overflow-y: auto;
padding-right:18px;
}

Now when the user tries to navigate through the suggestions using the
Up/Down arrow key, the suggestions not within the current visible area
are not displayed.

Thanks in advance.

[ALB-PSP-DV1]

Any help is appreciated.

On May 2, 11:39 am, ALB-PSP-DV1 <albpsp...@gmail.com> wrote:
> We have asuggestboxwith approx. 50suggestions. We are displaying a
> scrollbar for thesuggestboxusingthe following css

[Jens]

You probably have to implement your own SuggestionDisplay and add some logic to moveSelectionDown/moveSelectionUp to also adjust your scrollable container. You have made the container scrollable, so you must also implement your desired scrolling behavior.

-- J.

[ALB-PSP-DV1]

Thank you for the suggestion.

I have copied com.google.gwt.user.client.ui.SuggestBox in my codebase
and made the following changes and it works as expected.

public static class DefaultSuggestionDisplay extends SuggestionDisplay
implements HasAnimation {
private ScrollPanel scrollPanel;
protected Widget decorateSuggestionList(Widget suggestionList) {
scrollPanel = new ScrollPanel(suggestionList);
scrollPanel.setStyleName("suggestScrollContent");
return scrollPanel;
}
protected void moveSelectionDown() {
if (isSuggestionListShowing()) {

suggestionMenu.selectItem(suggestionMenu.getSelectedItemIndex() + 1);
if (scrollPanel != null) {
scrollPanel.ensureVisible(suggestionMenu.getSelectedItem());
}
}
}
protected void moveSelectionUp() {
if (isSuggestionListShowing()) {
if (suggestionMenu.getSelectedItemIndex() == -1) {
suggestionMenu.selectItem(suggestionMenu.getNumItems() - 1);
} else {

suggestionMenu.selectItem(suggestionMenu.getSelectedItemIndex() - 1);
}
if (scrollPanel != null) {
scrollPanel.ensureVisible(suggestionMenu.getSelectedItem());
}
}
}
}
}

.suggestScrollContent{

[jordi.be...@gmail.com]

Here is a solution without having to change the codebase:

private static class ScrollableDefaultSuggestionDisplay extends SuggestBox.DefaultSuggestionDisplay {
    private Widget suggestionMenu;
   
    @Override
    protected Widget decorateSuggestionList(Widget suggestionList) {
        suggestionMenu = suggestionList;
       
        return suggestionList;
    }
   
    @Override
    protected void moveSelectionDown() {
        super.moveSelectionDown();
        scrollSelectedItemIntoView();
    }
   
    @Override
    protected void moveSelectionUp() {
        super.moveSelectionUp();
        scrollSelectedItemIntoView();
    }
   
    private void scrollSelectedItemIntoView() {
        Element divElement = suggestionMenu.getElement();
        Node tableNode = (Element)divElement.getChild(divElement.getChildCount() - 1);  // Firefox, Chrome have 2, IE has 1
        //                      TABLE     TBODY       TR's
        NodeList<Node> trList = tableNode.getChild(0).getChildNodes();
        for (int trIndex = 0; trIndex < trList.getLength(); ++trIndex) {
            Element trElement = (Element)trList.getItem(trIndex);
            if (((Element)trElement.getChild(0)).getClassName().contains("selected")) {
                trElement.scrollIntoView();
               
                break;
            }
        }
    }
}