0

Hi I am using Ember place autocomple addon I want to modify below two behaviors of addons. 1. My places autocomplete textbox is inside a form. when I press enter key while filling autocomplet textbox form gets submitted.(even if I have not selected option from google suggestion) 2. if no places is selected and enter is pressed the first option should get selected.

I though extending the addon will help. so i tried the below code avoid submission of form but it didnt work.

import Ember from 'ember';
import PlacesAutocompleteField from 'ember-place-autocomplete/components/place-autocomplete-field';
export default PlacesAutocompleteField.extend({
  init(){
    this._super(...arguments);
  },
  keyUp: function(e){
    if(e.keyCode === 13){
      e.preventDefault();
    }
  },
  actions:{
    placeChanged(){
      this.toggleProperty('PLACE_CHANGED_FLAG');
    }
  }
});

Alternate way I tried was just to see if it works I added this 

  google.maps.event.addDomListener(this.$().children()[0],'keyUp',function(){
      console.log('keyup...');
      console.log(e);
    });

inside the addon it self. so the new code is

  autocompleteCallback: Ember.on('didInsertElement', function() {
    this.getAutocomplete();
    this.get('autocomplete').addListener('place_changed', () => {
      this.placeChanged();
    });
    google.maps.event.addDomListener(this.$().children()[0],'keyUp',function(){
      console.log('keyup...');
      console.log(e);
    });
  }),

still it doesnt work Jsbin enter "d" donot select any suggestion and press enter.

UPDATED as @GJK suggested using $(inputElement) works. Direction to choose suggestion on pressing enter if user does not choose anything

$(inputElement).keydown((event) => {
    if (event.keyCode === 13) {
        let o = $('div.pac-container').children().first();

        event.preventDefault();
    }
Rigel
  • 882
  • 1
  • 11
  • 32
  • An aside, why don't you want it to be submitted when the user presses enter? Doesn't that break accessibility? – locks Nov 17 '15 at 08:10
  • What didn't work about it? – locks Nov 17 '15 at 08:11
  • You're extending the addon, but are you actually using the extended version in your template and not the original? – GJK Nov 17 '15 at 13:59
  • @locks update the question. This textbox is inside a form. that form gets submitted even if I type few letter of place and do not select any value from suggestions. Hence on clicking enter I want addons to select the first option from the suggested places list as default and not save few inital letters i type. – Rigel Nov 17 '15 at 16:35
  • @GJK I read issues on template inheritance but I did not find solid answer to it. I assume i can still get the input box using the jquery method above. The alternate way didnot work for me – Rigel Nov 17 '15 at 16:37
  • You might want to try modifying the addon instead of extending it. See if that works for you. Also, `PLACE_CHANGED_FLAG: false` doesn't actually do anything. – GJK Nov 17 '15 at 17:19
  • @GJK In the alternate way I have modified the addon itself. but it did work – Rigel Nov 17 '15 at 17:21
  • @GJK I am not a seasoned programmer but I thought either by extending or reopening the component should work easily...unless I am doing something silly here – Rigel Nov 17 '15 at 17:23
  • Extending has subtle differences from reopening. I think we'd be able to help you much better if you were able to reproduce this in a JSBin. – GJK Nov 17 '15 at 17:25
  • @GJK here is the Jsbin. Just write "d" and press enter key( do not selected suggestion) still i get alert http://emberjs.jsbin.com/zijepepivo/edit?html,js,output – Rigel Nov 17 '15 at 17:52
  • Awesome, thanks for creating that! I'll take a look later today when I have some time. – GJK Nov 17 '15 at 17:53

1 Answers1

0

Turns out you were listening to the wrong event. As seen in this question, you have to override the keypress event instead of the keyup event.

In your JSBin, I was able to put the following code at the end of your getAutocomplete function and it successfully prevent the form from being submitted.

$(inputElement).keypress((event) => {
    if (event.keyCode === 13) {
        event.preventDefault();
    }
});
Community
  • 1
  • 1
GJK
  • 37,023
  • 8
  • 55
  • 74