In my App I have a side menu on the left side. This menu has an input field at the top. After clicking into the first input-field in the opened menu I want to show only the first input field and the close button. My idea was to experiment with hide some elements after click the input-field. I used ng-show for that. It works fine on ios device in Safari-Browser. But on Android (S3) the behavior is very strange (in the Browser - Chrome or the native one) . Because after clicking into the input-field the menu closes and the keyboard appears. So, the focus is in the field, but I can’t do anything because the menu is always closing after I open the menu the second time.
Thank you, for your help and greeting from munich (germany).
My menu with the input-field:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" expose-aside-when="large">
<ion-header-bar class="bar-stable" ng-show="show">
<h1 class="title">My Menu </h1>
</ion-header-bar>
<ion-content class="search-in-menu">
<div class="card search-in-menu padding">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Was / Wen" ng-model="searchInput.what" ng-click="showSuggest()">
</label>
<button class="button button-small right" ng-click="hideSuggest()" ng-show="!show">
close
</button>
<br />
<div class="range range-positive" ng-show="show">
<i class="icon ion-ios7-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-ios7-sunny"></i>
</div>
<button class="button button-block button-balanced" ng-show="show">
Suchen
</button>
</div>
<ion-list ng-show="show">
<ion-item nav-clear menu-close href="#/app/search">
Suche
</ion-item>
<ion-item nav-clear menu-close href="#/app/login">
Test 1
</ion-item>
<ion-item nav-clear menu-close href="#/app/mySavedDoctors">
Hello
</ion-item>
<ion-item nav-clear menu-close href="#/app/lastSearches">
Foo
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
Controller:
.controller('AppCtrl', ['$scope', function($scope) {
$scope.searchInput = {
"what" : '',
"where" : '',
"results" : []
};
$scope.show = true;
$scope.showSuggest = function() {
$scope.show = false;
};
$scope.hideSuggest = function() {
$scope.show = true;
};}])