Dmitriy Altsyvanovich Dmitriy Altsyvanovich - 2 months ago 18
HTML Question

gwt suggestbox doesn't hide on page scroll

I've created a suggest box and generated HTML page with huge text, so I can scroll.
1. Show suggest list
2. Scroll page

The popup box with suggestion list moves with scrolled page, but I want that it will neither hide when page scrolls nor move with page.

As I understand that suggest popup has absolute position. But is there some non css solution.




Answer to:

I've tried add scroll handler to Window, but I've found out that handle only event when I have two scrolls and right of them moves, only in this case. If I have one scroll to scroll page like in case with large text - nothing invokes

Answer

When constructing a SuggestBox you can provide your own SuggestOracle, TextBox and SuggestionDisplay. DefaultSuggestionDisplay can be used to hide suggestion list. You can do it in Window.scrollHandler.

Here is the code:

MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("one");
oracle.add("two");
oracle.add("three");

TextBox box = new TextBox();
final DefaultSuggestionDisplay display = new DefaultSuggestionDisplay();

SuggestBox suggestBox = new SuggestBox(oracle, box, display);

Window.addWindowScrollHandler(new ScrollHandler() {
    @Override
    public void onWindowScroll(ScrollEvent event) {
        display.hideSuggestions();
    }
});

Note, that you need to use DefaultSuggestionDisplay - see documentation on deprecated hideSuggestionList method.

I hope that the example explains it all.

I've also checked that if you don't use own SuggestionDisplay it uses DefaultSuggestionDisplay anyway. So you can do it even simpler.

((DefaultSuggestionDisplay) suggestBox.getSuggestionDisplay()).hideSuggestions();

EDIT:

If not the whole window is scrolled but only content of some panel, you can add a ScrollHandler to the panel:

panel.addDomHandler(new ScrollHandler() {
    @Override
    public void onScroll(ScrollEvent event) {
        ((DefaultSuggestionDisplay) suggestBox.getSuggestionDisplay()).hideSuggestions();
    }
}, ScrollEvent.getType());
Comments