Hide some elements in side-menu in Android seems not working


#1

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;
};}])

#2

Update: I have tested the menu with just an inputfield without ng-click. Just a pure inputfield. In iOS-Safari-Browser the menu remains open. On Android device in a browser the focus is set, the keyboard opens and the menu closes. Why that?


#3

I found the same issue here.


#4

Has anyone an idea? Please help!!

In Firefox, Chrome and the native Browser on an Android device it doesn’t work. Every time when I click into the textinput the menu closes but the keyboard appears.

On my iPhone 6 it works.