We want to use the google.maps.places.Autocomplete functionality in a Sencha app. It's working on Chrome/PC and Safari/OSX. But on a iOS (tested v5.1) it is not working properly: if you type something in the box and taps on one of the suggestions in the suggestion box (generated by google) then the selected suggestion is not taken: the suggestionbox disappear and nothing happens. It looks like some blur/focus event of Sencha is fired before google can/will handle the touchstart (?) event. To reproduce we have created the folowing testcode (removed Sencha text field and Map and uses plain input box but placed in a Sencha container):
app.js:
Code:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
views: [
'MyContainer'
],
name: 'GMap',
launch: function() {
Ext.create('GMap.view.MyContainer', {fullscreen: true});
}
});
app/view/MyContainer.js
Code:
Ext.define('GMap.view.MyContainer', {
extend: 'Ext.Container',
alias: 'widget.myContainer',
config: {
html: '<div> <input id="searchTextField" type="text" size="50"> </div>',
listeners: [
{
fn: 'onContainerInitialize',
event: 'initialize'
}
]
},
onContainerInitialize: function(component, options) {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
});
If you use this without Sencha it works.
Does anyone know how to make this work on iOS? Any suggestion where to look ?