How to make SuggestBox display scroll properly?

[chris-x...@db.com]

I'm working with a SuggestBox that produces a very large number of suggestions on the first one or two chanracters.  I don't want an ugly list that disappears off the bottom of the screen, so I've made the selection display scroll by adding height and overflow to the CSS for .gwt-SuggestBoxPopup .suggestPopupContent.

It all works fine until I try to move through the selection list using the keyboard.  The selected element does not scroll into view.  This is obviously not going to pass any UX tests.

I've subclassed SuggestBox.DefaultSuggestionDisplay in the hope of being able to scroll the selected element into view as part of the moveSelectionDown() and moveSelectionUp() methods.  But it seems that to get to the Element selected I need access to the suggestionMenu field, and that, for some reason, is private, so the subclass can't see it.

Oh well, I guess I can copy the code from SuggestBox.DefaultSuggestionDisplay and implement my own version.  This sort of cut-n-paste inheritance goes against decent Java principles, but it's only 280 lines or so.  No luck - SuggestBox.DefaultSuggestionDisplay has a dependence on the private class SuggestBox.SuggestionMenu.

At this point the only solution I can think of is to search the DOM for an element with with a CSS class of "item-selected". 

Does anyone know of a better solution?  I would be delighted to hear it.

Chris

[Juan Pablo Gardella]

Maybe file a ticket + patch with the change to SuggestBox in order to make extensible.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

[Andy]

This is a common problem when trying to extend and modify GWT widgets. The easiest way to work around the use of private is to use JSNI.

Here is an example from our gwt-traction library.

-Andy

[Andy]

To be more specific, once you provide access to the MenuBar in your subclass via something like:

public native MenuBar getPrivateMenuBar() /*-{

        return ... ;

}-*/;

you should be able to do:

getPrivateMenuBar().getSelectedItem().getElement().scrollIntoView();

Oh, but getSelectedItem() is protected! In that case I would just chain them both in a native method. So in your subclass add:

public native MenuItem getSuperSecretSelectedMenuItem() /*-{

}-*/;

Anyone know the rationale behind making getItems() and getSelectedItem() protected in MenuBar?

-Andy

[Julien Dramaix]

Or use GwtQuery. It helps you to query dom elements of a widget and modify them.