Problem with Doubleclick on ComboBox Arrow

Vaadin 6 / 7 / 8
1

When doubleclicking on the Arrowdown button in the ComboBox (VFilterSelect) in Vaadin 7.5.10 (and previous Versions) the Overlay opens and directly closes again. Aftwerwards a single click will cause the same behaviour. A User did this in IE 11 in our application because he selected the wrong value and wanted to select the right one fast. We implement an application where Users may edit entries very fast, so a doubleclick on the ComboBox is definitly a scenario we need to handle.

This also may be achived on Vaadin-Demo Page


http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/combo-box

Just doubleclick on the arrow. And then singleclick it again. In IE 11 this is really easy to do. In other Browsers you need to click a bit faster but it works also.

I GWT debugged the state after the doubleclick a bit and found out that after the doubleclick a AnimationEndListener stays active which closes the Overlay directly after opening it. It calls the hide Method in VOverlay which will add another Listener to the Element. Every time the Arrow is clicked the listeners added will add more of them, so the element ends up with a lot of listeners. In IE 11 this blocks the whole Interface very soon. Here is the code adding the Listeners (Lines 1030ff in VOverlay.java):

public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
....
    public void hide(final boolean autoClosed, final boolean animateIn,
            final boolean animateOut) {
        if (BrowserInfo.get().isIE8() || BrowserInfo.get().isIE9()) {
            super.hide(autoClosed);
        } else {
            if (animateIn
                    && getStyleName().contains(ADDITIONAL_CLASSNAME_ANIMATE_IN)) {
                AnimationUtil.addAnimationEndListener(getElement(),
                        new AnimationEndListener() {
                            @Override
                            public void onAnimationEnd(NativeEvent event) {
                                if (AnimationUtil
                                        .getAnimationName(event)
                                        .contains(
                                                ADDITIONAL_CLASSNAME_ANIMATE_IN)) {
                                    VOverlay.this.hide(autoClosed);
                                }
                            }
                        });
            } else {
              ....
            }
        }
    }

Where

VOverlay.this.hide(autoClosed)

causes the already added Listerners to add new Listeners. I know this should be a BugReport, but unfortunatly I am not able to verify my EMail address in Trac currently.

I tried to replace VOverlay with some derived class I implemented (using the replace formalism in gwt.xml) but this did not work - I think this is the case because in the calling code this.VOverlay.hide is used which skips my overridden Method. I also cannot just copy the VOverlay class to my Widgetset and edit it. And I did not understand the behaviour during the doubleclick handling yet. Perhaps you can help me with that.

So here in the forum I just ask for some workaround and someone to please open a Bug for it. Is it for example possible to catch the doubleclick by JavaScript and avoid it to be send to the ComboBox?

2

I just managed to create a Ticket: https://dev.vaadin.com/ticket/19340

3

Now I have a workaround - rplacing the VFilterSelect with the following class:

public class VNonBlockingFilterSelect extends VFilterSelect {

  @Override
  public void filterOptions(int page, String filter) {
    if (!suggestionPopup.isAttached()) {
      AnimationUtil.removeAllAnimationEndListeners(suggestionPopup.getElement());
    }
    super.filterOptions(page, filter);
  }

  @Override
  public void onClick(ClickEvent event) {
    if (!suggestionPopup.isAttached()) {
      AnimationUtil.removeAllAnimationEndListeners(suggestionPopup.getElement());
    }
    super.onClick(event);
  }
}

using my projects gwt.xml cleans up the listeners before any opening is done.