Как автоматически прокрутить GWT SuggestBox с max-height и overflow-y: scroll?

Question

Как можно автоматически прокрутить GWT SuggestBox с максимальной высотой, установленной на PopupPanel, удерживающей SuggestBox? В настоящее время, когда пользователь нажимает клавиши «вверх» и «вниз», стили изменяются в предложенных элементах, а нажатие клавиши «Ввод» выбирает выбранный в данный момент элемент в списке.

Когда элемент расположен ниже полос прокрутки максимальной высоты, он не прокручивается. Я попытался расширить SuggestBox и внутренний класс DefaultSuggestionDisplay для переопределения moveSelectionDown() и moveSelectionUp() для явного вызова popup.setScrollTop().

Для этого мне нужен доступ к абсолютной вершине выбранного в данный момент MenuItem, поэтому мне нужен доступ к SuggestionMenu, который также является внутренним классом SuggestBox, который является закрытым и объявлен как закрытый член в DefaultSuggestionDisplay без добытчика. Поскольку GWT - это JavaScript, мы не можем использовать отражение для доступа к нему .... У кого-нибудь есть обходной путь для этой проблемы?

Спасибо.

Answer 1

Я искал вокруг и не мог найти правильное решение (кроме переопределения SuggestBox).Следующее избегает переопределения SuggestBox:

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() {
        //                                     DIV          TABLE       TBODY       TR's
        NodeList<Node> trList = suggestionMenu.getElement().getChild(1).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;
        }
    }
}

}

Answer 2

После этого обсуждения в группах Google я реализовал аналогичное решение, которое является более кратким из-за использования JSNI:

private class ScrollableDefaultSuggestionDisplay extends DefaultSuggestionDisplay {

    @Override
    protected void moveSelectionDown() {
        super.moveSelectionDown();
        scrollSelectedItemIntoView();
    }

    @Override
    protected void moveSelectionUp() {
        super.moveSelectionUp();
        scrollSelectedItemIntoView();
    }

    private void scrollSelectedItemIntoView() {
        getSelectedMenuItem().getElement().scrollIntoView();
    }

    private native MenuItem getSelectedMenuItem() /*-{
        var menu = this.@com.google.gwt.user.client.ui.SuggestBox.DefaultSuggestionDisplay::suggestionMenu;
        return menu.@com.google.gwt.user.client.ui.MenuBar::selectedItem;
    }-*/;
}

Answer 3

Хорошо, я наконец нашел решение. Мне пришлось создать свой собственный ящик для подсказок, основанный на реализациях GWT SuggestBox. Но следуйте ниже в пользовательской реализации: - Поместите ScrollPanel в PopupPanel, затем поместите MenuBar в ScrollPanel. -В MoveSelectionUp () и moveSelectionDown () вашей новой внутренней реализации SuggestionDisplat добавьте следующий код:

 panel.ensureVisible( menu.getSelectedItem( ) );

Этого нельзя достичь, расширив ящик SuggestBox, поскольку у нас не будет доступа к выбранным MenuItem, если не переопределить защищенный метод getSelectionItem () как открытый метод.

Наконец добавьте CSS:

max-height: 250px;

Для popupPanel в ваших реализациях дисплея.