Form Submission on Enter

[RaghulXander]

Use Keyboard to navigate options and press enter immediately Form is get Submitted

1. Possible solutions are avoiding Enter keypress but i need enter key press too.

[sChupin]

I have the same needs. This stackoverflow post helped me: https://stackoverflow.com/questions/11388251/google-autocomplete-enter-to-select.

[chubbard]

This should be an open issue because it's easy to fix if you are inside the Google directive. I'd argue really this should be fixed inside the underlying Google component because it'll happen for them as well outside of angular. But this is what I did to work around it. Inside the component holding the form element I looked for the enter key bubbling up. I'm checking where the key event came from so that hitting enter would still allow the form to be submitted if used in other fields, but if used on the places component it won't submit the form automatically.

    @ViewChild( 'street', { read: ElementRef} ) streetElem : ElementRef;

    @HostListener('keydown', ['$event'])
    handleKeyboardEvent( event : KeyboardEvent ) {
        // this prevents places component from submitting the form when using enter
        let key = event.key.toLowerCase();
        if( key == 'enter' && event.target === this.streetElem.nativeElement ) {
            event.preventDefault();
            event.stopPropagation();
        }
    }

[skynet2]

Fixed in 2.0.3

[hksix]

@skynet2 With Chrome's built in autocomplete the code submitted in 2.0.3 will produce an error when the user clicks on the address suggested by the browser.

This can be fixed by wrapping the code in a if( "key" in event ){}
I believe the code snippet below should resolve this issue.

@HostListener('keydown', ['$event'])
	handleKeyboardEvent( event : KeyboardEvent ) {
		// this prevents places component from submitting the form when using enter
		if( "key" in event ){
			let key = event.key.toLowerCase();
			if( key == 'enter' && event.target === this.streetElem.nativeElement ) {
				event.preventDefault();
				event.stopPropagation();
			}
		}
	}