branflake2267 / GWT-Maps-V3-Api

GWT Maps V3 Javascript Bindings
Other
144 stars 113 forks source link

Error when hitting enter in Textbox in form which uses Autocomplete #221

Closed DarrenC closed 10 years ago

DarrenC commented 10 years ago

Hi, I've come across an issue while using the GWT-Maps places Autocomplete with a TextBox when it is contained in a Form.

If I hit enter while the cursor is in the textbox, then there is a warning message that pops up saying "GWT module 'showcase' may need to be recompiled". If the textbox is not contained in a form, then there is no warning message.

I first noticed this issue in an app I'm developing but can recreate in the latest Showcase Demo using the AutocompletePlacesMapWidget by adding a FormPanel to the page.

The issue seems to be reproducible whether there is text entered in the textbox or not, or even if there is a google places result returned and highlighted by pressing the down arrow to select it and then hitting enter. (In the final case, the map does update to show the result once the warning popup is closed).

I'm using version - 3.10.0-alpha-8-SNAPSHOT of the library.

Is using a Textbox with Autocomplete within a form a supported usecase?

My code is below from the AutocompletePlacesMapWidget.java. I've just added a FormPanel to the widget and also added a null check for the geomtry variable in case we don't find a place in the google search. Please let me know if you need anything more.

private void draw() {
    pWidget.clear();
    HTML html = new HTML("<br><br>Map with autocomplete places &nbsp;&nbsp;");
    tbPlaces = new TextBox();
    tbPlaces.setWidth("350px");
    HorizontalPanel hp = new HorizontalPanel();
    hp.add(html);
    hp.add(tbPlaces);

    // Adding FormPanel around the tables containing the textbox    
    FormPanel fPanel = new FormPanel();
    fPanel.add(hp);
    //pWidget.add(hp);
    pWidget.add(fPanel);

    hp.setCellVerticalAlignment(tbPlaces, HorizontalPanel.ALIGN_BOTTOM);
    drawMap();
    drawAutoComplete();
  }
private void drawAutoComplete() {
.
.
.
    autoComplete.addPlaceChangeHandler(new PlaceChangeMapHandler() {
      public void onEvent(PlaceChangeMapEvent event) {        
        PlaceResult result = autoComplete.getPlace();       
        PlaceGeometry geomtry = result.getGeometry();
        // Check geomtry for null in case we couldn't find a place for the user input.
        if(geomtry != null){
            LatLng center = geomtry.getLocation();  
            mapWidget.panTo(center);
            GWT.log("place changed center=" + center);
        }else{
            GWT.log("FOUND NOTHING!");
        }           
      }
    });
.
.
.
  }
DarrenC commented 10 years ago

In fact, with a bit more investigation, this seems to be more an issue of the default enter key behaviour which does a form submission, rather than anything related to the GWT maps framework or the autocomplete button.

I'll close the issue and below I leave a workaround for blocking the enter key in the text box from submitting the form.

                // Prevent Enter key presses from submitting the form in the departure city text box 
        tbPlaces.addKeyDownHandler(new KeyDownHandler() {           
            @Override
            public void onKeyDown(KeyDownEvent event) {             
                if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
                    GWT.log("Blocking form submit for autocomplete text box");
                    event.preventDefault();
                }
            }
        });