dart google-maps - triggering event - dart

Question

I try to add a listener to my autocomplete box in order to select the first choice when pressing enter but it doesn't work.
event.addDomListener(input, 'keypress', (e) {
if (e.keyCode == 13) {
event.trigger(html.document.getElementById('pac-input').innerHtml, 'keydown',
html.KeyCode.DOWN);
}
});
I am not sure concerning
html.document.getElementById('pac-input').innerHtml
Thanks for your help.
[edit]
I use angular2.0.0-beta.21.
My template is :
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="map-canvas" style="height: 500px;"></div>
and my component :
#Component(
selector: 'myComponent',
templateUrl: 'template.html',
pipes: const [IntlPipe]
)
class MyComponent implements OnInit {
final UserService _userService;
final IntlService _intlService;
Autocomplete autocomplete;
GMap map;
String infoMessage = "";
String errorMessage = "";
CornersComponent(this._userService, this._intlService);
#override
ngOnInit() {
var mapOptions = new MapOptions()
..zoom = 13
..maxZoom = 19
..minZoom = 12
..center = new LatLng(48.871083, 2.346348)
..mapTypeId = MapTypeId.ROADMAP
..streetViewControl = false
..panControl = false
..mapTypeControl = false
..scrollwheel = false
..styles = <MapTypeStyle>[
new MapTypeStyle()
..featureType = MapTypeStyleFeatureType.POI_BUSINESS
..elementType = MapTypeStyleElementType.LABELS
..stylers = <MapTypeStyler>[
new MapTypeStyler()
..visibility = 'off'
]
];
map = new GMap(html.querySelector("#map-canvas"), mapOptions);
var input = html.document.getElementById('pac-input') as html
.InputElement;
map.controls[ControlPosition.TOP_LEFT].push(input);
autocomplete = new Autocomplete(input);
autocomplete.bindTo('bounds', map);
final infowindow = new InfoWindow();
final marker = new Marker(new MarkerOptions()
..map = map
..anchorPoint = new Point(0, -29));
autocomplete.onPlaceChanged.listen((_) {
infowindow.close();
marker.visible = false;
final place = autocomplete.place;
if (place.geometry == null) {
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport != null) {
map.fitBounds(place.geometry.viewport);
} else {
map.center = place.geometry.location;
map.zoom = 15; // Why 17? Because it looks good.
}
marker.icon = new Icon()
..url = place.icon
..size = new Size(71, 71)
..origin = new Point(0, 0)
..anchor = new Point(17, 34)
..scaledSize = new Size(35, 35);
marker.position = place.geometry.location;
marker.visible = true;
String address = '';
if (place.addressComponents != null) {
address = [
(place.addressComponents[0] != null &&
place.addressComponents[0].shortName != null
? place.addressComponents[0].shortName
: ''),
(place.addressComponents[1] != null &&
place.addressComponents[1].shortName != null
? place.addressComponents[1].shortName
: ''),
(place.addressComponents[2] != null &&
place.addressComponents[2].shortName != null
? place.addressComponents[2].shortName
: '')
].join(' ');
}
infowindow.content = '<div><strong>${place.name}</strong><br>${address}';
infowindow.open(map, marker);
});
event.addDomListener(input, 'keypress', (e) {
assert(e is html.KeyboardEvent);
if (e.keyCode == html.KeyCode.ENTER) {
event.trigger(input, 'keydown',
new html.KeyEvent('keydown', keyCode: html.KeyCode.DOWN));
}
});
}
}
I have found a workaround :
Calling at the end on the ngOnInit method :
context.callMethod('myJavascriptMethod');
function myJavascriptMethod() {
var input = document.getElementById('pac-input');
google.maps.event.addDomListener(input, 'keypress', function (e) {
if (e.keyCode === 13) {
google.maps.event.trigger(this, 'keydown', {"keyCode": 40});
}
});
}

Answer 1

The following code should work:
import 'dart:js_util' show jsify;
event.addDomListener(input, 'keypress', (e) {
assert(e is html.KeyboardEvent);
if (e.keyCode == html.KeyCode.ENTER) {
event.trigger(input, 'keydown', jsify({'keyCode': html.KeyCode.DOWN}));
}
});
You can alternatively use the following to trigger events:
input.dispatchEvent(new html.KeyEvent('keydown', keyCode: html.KeyCode.DOWN));