I am developing an Webview app for iOS using angularjs and when filling a search form with select inputs in iOS it keeps annoyingly auto-skipping to the next field, not letting the user fill the form. Here is the html and js code:
HTML:
<form role='form' ng-submit="submitSearch(models['BuscarEstabelecimentoForm[busca-livre]'])">
<div class="form-group">
<div class='input-group'>
<input type="text" id="bl-ipt" placeholder="Busca Livre"
ng-model="models['BuscarEstabelecimentoForm[nome]']"
ng-init="models['BuscarEstabelecimentoForm[nome]']=''"
class='form-control' />
<div class='input-group-addon background-lupa'>
<a align="center" ng-click="submitSearch(true)"><center ><i class="busca-livre-icon"></i></center></a></div>
</div>
</div>
<div class='form-group'>
<div ng-repeat="select in selectsList">
<div class="select-style-wrapper-gray" ng-if="select != 'estado' && select != 'cidade' && select != 'bairro' && select != 'estado_civil' && select != 'faixa_etaria'">
<select class='form-control' ng-model="models['BuscarEstabelecimentoForm['+select+']']" ng-options="opt as opt.name for opt in selects[select].options" ng-change="change(select);">
<!-- <option ng-repeat="option in selects[select].options" value="{{option.value}}">{{option.name}}</option> -->
</select>
</div>
<div class="select-style-wrapper-gray" ng-if="select == 'estado_civil' || select == 'faixa_etaria'">
<select class='form-control filtros' disabled ng-model="models['BuscarEstabelecimentoForm['+select+']']" ng-options="opt as opt.name for opt in selects[select].options" ng-change="change(select);" style="-webkit-appearance: none;">
<!-- <option ng-repeat="option in selects[select].options" value="{{option.value}}">{{option.name}}</option> -->
</select>
</div>
<div class="select-style-wrapper" ng-if="select == 'estado' || select == 'cidade'">
<select class='form-control' ng-model="models['BuscarEstabelecimentoForm['+select+']']" ng-options="opt as opt.name for opt in selects[select].options" ng-change="change(select);">
<option value="" ng-if="false"></option>
<!-- <option ng-repeat="option in selects[select].options" value="{{option.value}}">{{option.name}}</option> -->
</select>
</div>
<div class="select-style-wrapper-blue" ng-if="select == 'bairro'">
<select class='form-control' ng-model="models['BuscarEstabelecimentoForm['+select+']']" ng-options="opt as opt.name for opt in selects[select].options" ng-change="change(select);">
<option value="" ng-if="false"></option>
<!-- <option ng-repeat="option in selects[select].options" value="{{option.value}}">{{option.name}}</option> -->
</select>
</div>
</div>
<div>
<button class="btn btn-primary btn-block" id="buscar" ng-click="submitSearch();">Buscar</button>
</div>
</div>
</form>
Javascript:
app.controller('IndexController', ['$scope', '$rootScope', '$route', '$routeParams', '$http', '$location', 'UserServices', function($scope, $rootScope, $route, $routeParams, $http, $location, UserServices){
console.log('Loading IndexController.');
$rootScope.loginScreen = ' has-navbar-top has-navbar-bottom';
var url = location.search.split('url=')[1];
var regId = location.search.split('token=')[1];
if (url == 'verfila') {
$location.path('/success/'+$routeParams.userId+'/visualizarfila/'+$scope.fila);
} else if (url == 'vermensagens') {
$location.path('/success/'+$routeParams.userId+'/mensagens');
}
if(regId!='') {
window.localStorage.setItem('regId',regId);
console.log('TOKEN:'+window.localStorage.getItem('regId'));
}
$rootScope.reload = function(){
$route.reload();
}
$scope.selects = {
'nome': {
model: 'nome',
options: [{
value: '',
name: ''
}]
},
'estado': {
model: 'estado',
options: []
},
'cidade': {
model: 'cidade',
options: [{
value: '',
name: 'CIDADE*'
}]
},
'bairro': {
model: 'bairro',
options: [{
value: '',
name: 'BAIRRO'
}]
},
'ramo': {
model: 'ramo',
options: [{
value: '',
name: 'TIPO DE DESTINO'
}]
},
'especialidade': {
model: 'especialidade',
options: [{
value: '',
name: 'ESPECIALIDADE'
}]
},
'genero': {
model: 'genero',
options: [{
value: '',
name: 'GÊNERO'
},
{
value: 'feminino',
name: 'FEMININO'
},
{
value: 'masculino',
name: 'MASCULINO'
}]
},
'estado_civil': {
model: 'estado_civil',
options: [{
value: '',
name: 'ESTADO CIVIL'
},
{
value: 'Casado',
name: 'CASADO(A)'
},
{
value: 'Divorciado',
name: 'DIVORCIADO(A)'
},
{
value: 'Solteiro',
name: 'SOLTEIRO(A)'
},
{
value: 'Viuvo',
name: 'VIUVO(A)'
},
{
value: 'todos',
name: 'TODOS'
}]
},
'faixa_etaria': {
model: 'faixa_etaria',
options: [{
value: '',
name: 'FAIXA ETÁRIA'
},
{
value: '18_24',
name: '18 A 24 ANOS'
},
{
value: '25_34',
name: '25 A 34 ANOS'
},
{
value: '35_44',
name: '35 A 44 ANOS'
},
{
value: '45',
name: '45 ANOS OU MAIS'
},
{
value: 'todos',
name: 'TODOS'
}]
}
};
$scope.selectsList = ['estado', 'cidade', 'bairro', 'ramo', 'especialidade', 'genero', 'estado_civil', 'faixa_etaria'];
$scope.models = {
'BuscarEstabelecimentoForm[nome]' : undefined,
'BuscarEstabelecimentoForm[estado]': $scope.selects['estado'].options[0],
'BuscarEstabelecimentoForm[cidade]': $scope.selects['cidade'].options[0],
'BuscarEstabelecimentoForm[bairro]': $scope.selects['bairro'].options[0],
'BuscarEstabelecimentoForm[ramo]': $scope.selects['ramo'].options[0],
'BuscarEstabelecimentoForm[especialidade]': $scope.selects['especialidade'].options[0],
'BuscarEstabelecimentoForm[genero]': $scope.selects['genero'].options[0],
'BuscarEstabelecimentoForm[estado_civil]': $scope.selects['estado_civil'].options[0],
'BuscarEstabelecimentoForm[faixa_etaria]': $scope.selects['faixa_etaria'].options[0],
'busca-livre': undefined
};
$http.post(SERVER_ADDRESS+'r=mobile/acessarPerfil', '&mobileKey='+authKey,{
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function(data, status, headers, config){
var profile = data.user;
var estados = window.localStorage.getItem('estados'),
ramos = window.localStorage.getItem('ramos');
$scope.meuBairro = profile.bairro;
$scope.minhaCidade = profile.cidade;
$scope.meuEstado = profile.estado;
if(!(estados == undefined || estados == null)){
if(JSON.parse(estados)[1].value !=$scope.meuEstado){
estados = null;
}
}
console.log('Estado: '+$scope.meuEstado);
console.log('Cidade: '+$scope.minhaCidade);
console.log('Bairro: '+$scope.meuBairro);
if(estados === undefined || estados === null){
console.debug('Setando estados!');
$rootScope.loading = true;
$http.post(SERVER_ADDRESS+'r=mobile/listarEstados', '&mobileKey='+authKey, {
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function(data, status, headers, config){
for(var x in data.estados){
$scope.selects['estado'].options.push({value: x, name: data.estados[x]});
}
$scope.models['BuscarEstabelecimentoForm[estado]'] = $scope.selects['estado'].options[0];
var meuEstadoIndex = findInSelect($scope.selects['estado'],$scope.meuEstado);
reorganizeArray($scope.selects['estado'].options,meuEstadoIndex);
console.log(meuEstadoIndex);
window.localStorage.setItem('estados', JSON.stringify($scope.selects['estado'].options));
$rootScope.loading = false;
}).error(function(data, status, headers, config){
$rootScope.alerta('Ocorreu um erro ao tentar comunicar a aplicação com nossos servidores. Verifique sua conexão com a internet e tente novamente.', null, 'Boa da Hora');
$location.path('/');
$rootScope.loading = false;
});
}else{
console.log('trigger change state');
$scope.models['BuscarEstabelecimentoForm[estado]'] = '';
$scope.selects['estado'].options = JSON.parse(estados);
$scope.models['BuscarEstabelecimentoForm[estado]'] = $scope.selects['estado'].options[0];
}
if(ramos === undefined || ramos === null){
console.debug('Setando ramos !');
$rootScope.loading = true;
$http.post(SERVER_ADDRESS+'r=mobile/listarRamos', '', {
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function(data, status, headers, config){
for(var x in data.ramos){
$scope.selects['ramo'].options.push({value: data.ramos[x].ramo_id, name: data.ramos[x].ramo_nome});
}
window.localStorage.setItem('ramos', JSON.stringify($scope.selects['ramo'].options));
$scope.models['BuscarEstabelecimentoForm[ramo]'] = $scope.selects['ramo'].options[0];
$rootScope.loading = false;
}).error(function(data, status, headers, config){
$rootScope.alerta('Ocorreu um erro ao tentar comunicar a aplicação com nossos servidores. Verifique sua conexão com a internet e tente novamente.', null, 'Boa da Hora');
$location.path('/');
$rootScope.loading = false;
});
}else{
$scope.selects['ramo'].options = JSON.parse(ramos);
$scope.models['BuscarEstabelecimentoForm[ramo]'] = $scope.selects['ramo'].options[0];
}
}).error(function(data, status, headers, config){
console.log(data);
});
$scope.change = function(changed){
if(changed === 'estado') {
console.log('change state');
if($scope.models['BuscarEstabelecimentoForm[estado]'].value != 0){
$rootScope.loading = true;
$http.post(SERVER_ADDRESS+'r=mobile/listarCidades', '&estado='+$scope.models['BuscarEstabelecimentoForm[estado]'].value + '&mobileKey='+authKey,{
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function(data, status, headers, config){
$scope.selects['cidade'].options=[{ value: '', name: 'CIDADE*' }];
for(var x in data.cidades){
$scope.selects['cidade'].options.push({value: x, name: data.cidades[x]});
}
if ($scope.models['BuscarEstabelecimentoForm[estado]'].name == $scope.meuEstado) {
var minhaCidadeIndex = findInSelect($scope.selects['estado'],$scope.minhaCidade);
reorganizeArray($scope.selects['cidade'].options,minhaCidadeIndex);
}
$scope.selects['bairro'].options = [{ value: '', name: 'BAIRRO' }];
console.log('trigger change city');
$rootScope.loading = false;
$scope.models['BuscarEstabelecimentoForm[cidade]'] = $scope.selects['cidade'].options[0];
$scope.models['BuscarEstabelecimentoForm[bairro]'] = $scope.selects['bairro'].options[0];
}).error(function(data, status,headers, config){
$rootScope.alerta('Ocorreu um erro ao tentar comunicar a aplicação com nossos servidores. Verifique sua conexão com a internet e tente novamente.', null, 'Boa da Hora');
$location.path('/');
$rootScope.loading = false;
});
} else if ($scope.models['BuscarEstabelecimentoForm[estado]'].value == 0) {
$scope.selects['cidade'].options = [{
value: '',
name: 'CIDADE*'
}];
$scope.selects['bairro'].options = [{
value: '',
name: 'BAIRRO'
}];
$scope.models['BuscarEstabelecimentoForm[cidade]'] = $scope.selects['cidade'].options[0];
$scope.models['BuscarEstabelecimentoForm[bairro]'] = $scope.selects['bairro'].options[0];
}
} else if(changed === 'cidade') {
console.log('change city');
if($scope.models['BuscarEstabelecimentoForm[cidade]'].value != 0){
$rootScope.loading = true;
$http.post(SERVER_ADDRESS+'r=mobile/listarBairros', '&cidade='+$scope.models['BuscarEstabelecimentoForm[cidade]'].value,{
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function(data, status, headers, config){
for(var x in data.bairros){
$scope.selects['bairro'].options.push({value: data.bairros[x].bairro, name: data.bairros[x].bairro});
}
if ($scope.models['BuscarEstabelecimentoForm[estado]'].name == $scope.meuEstado) {
if ($scope.models['BuscarEstabelecimentoForm[cidade]'].name == $scope.minhaCidade) {
var meuBairroIndex = findInSelect($scope.selects['bairro'],$scope.meuBairro);
reorganizeArray($scope.selects['bairro'].options,meuBairroIndex);
}
}
$scope.models['BuscarEstabelecimentoForm[bairro]'] = $scope.selects['bairro'].options[0];
$rootScope.loading = false;
}).error(function(data, status,headers, config){
$rootScope.alerta('Ocorreu um erro ao tentar comunicar a aplicação com nossos servidores. Verifique sua conexão com a internet e tente novamente.', null,'Boa da Hora');
$location.path('/');
$rootScope.loading = false;
});
} else if($scope.models['BuscarEstabelecimentoForm[cidade]'].value == 0) {
$scope.selects['bairro'].options = [{
value: '',
name: 'BAIRRO'
}];
$scope.models['BuscarEstabelecimentoForm[bairro]'] = $scope.selects['bairro'].options[0];
}
} else if(changed === 'ramo') {
if($scope.models['BuscarEstabelecimentoForm[ramo]'].value != 0){
$scope.selects['especialidade'].options = [{
value: '',
name: 'ESPECIALIDADE'
}];
$rootScope.loading = true;
console.log($scope.models['BuscarEstabelecimentoForm[ramo]']);
$http.post(SERVER_ADDRESS+'r=mobile/listarEspecialidades', '&ramo='+$scope.models['BuscarEstabelecimentoForm[ramo]'].value,{
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function(data, status, headers, config){
for(var x in data.especialidades){
$scope.selects['especialidade'].options.push({value: x, name: data.especialidades[x].especialidade_nome});
}
$scope.models['BuscarEstabelecimentoForm[especialidade]'] = $scope.selects['especialidade'].options[0];
$rootScope.loading = false;
}).error(function(data, status,headers, config){
$rootScope.alerta('Ocorreu um erro ao tentar comunicar a aplicação com nossos servidores. Verifique sua conexão com a internet e tente novamente.', null,'Boa da Hora');
$location.path('/');
$rootScope.loading = false;
});
} else if($scope.models['BuscarEstabelecimentoForm[ramo]'].value == 0) {
$scope.selects['especialidade'].options = [{
value: '',
name: 'ESPECIALIDADE'
}];
$scope.models['BuscarEstabelecimentoForm[especialidade]'] = $scope.selects['especialidade'].options[0];
}
} else if(changed === 'genero'){
if($scope.models['BuscarEstabelecimentoForm[genero]'].value != 0){
document.getElementsByClassName('filtros')[0].disabled = false;
document.getElementsByClassName('filtros')[1].disabled = false;
} else {
document.getElementsByClassName('filtros')[0].disabled = true;
document.getElementsByClassName('filtros')[1].disabled = true;
$scope.models['BuscarEstabelecimentoForm[estado_civil]'] = $scope.selects['estado_civil'].options[0];
$scope.models['BuscarEstabelecimentoForm[faixa_etaria]'] = $scope.selects['faixa_etaria'].options[0];
}
}
}
I know it's been a long time ago, but I was able to solve it by editing the bootstrap file. I know it's not ok to do this, but it seemed to be the only way to solve it. I am not sure if this is a bootstrap bug, since this was the first time I experienced something like that.