Rc.4 totally broke my forms


#1

The latest release rc.4 totally screwed up all my forms. When the keyboard is displayed on iOS my forms fling about 3 times as hi in the upwards direction to the point that the focused input is no longer on the screen.


#2

Can you provide a codepen where you see this?


#3

Hey @mhartington, so I created a starter tabs project and filled it with inputs, and it seemed to be fine, however, when I upgrade my ionic lib folder from rc2 to rc4 this problem occurs. Here’s a sample view from my app, and a video showing the problem since I can’t exactly replicate it. If this helps great, if not, I’ll try to dig more into it.

<ion-view view-title="Enter Profile" hide-nav-bar="true" can-swipe-back="false">
	<ion-content>
		<h3 class="content-header push-down">Create your account</h3>
		<div class="padding" style="padding-top: 10px">
			<div class="form">
				<div class="form-inputs">
					<label class="form-label">First Name</label>
					<input type="text" ng-model="profileForm.name.first" placeholder="Johnny" />

					<label class="form-label">Last Name</label>
					<input type="text" ng-model="profileForm.name.last" placeholder="Appleseed" />

					<label class="form-label">Email Address</label>
					<input type="email" ng-model="profileForm.email" placeholder="your@amazing.com" />
					
					<label class="form-label">Password</label>
					<input type="password" ng-model="profileForm.password" placeholder="Secret, yet memorable." />
				</div>
				<button class="form-submit button button-gold button-block" ng-click="createProfile()">Continue</button>
			</div>
		</div>
	</ion-content>
</ion-view>

Here is the video.


#4

Hmm, I couldn’t replicate the issues with this markup.

Anyway you could put together a more detailed example?


#5

Hey @mhartington,

I discovered the issue, it’s not Ionic :smile:. However, I’m not sure why upgrading caused the issue. So I have these two directives I use to make the user experience better by showing the keyboard and autofocusing inputs.

.directive('focusInput', function($ionicPlatform){

    return {
        restrict: 'A'
        , link: function($scope, element, attrs) {

            $scope.$on('focus-input', function(){
                $(element).focus();
                if (ionic.Platform.isAndroid()) {
                    cordova.plugins.Keyboard.show();
                }
            });

        }
    }

})

.directive('blurInput', function(){

    return {
        restrict: 'A'
        , link: function($scope, element, attrs) {

            $scope.$on('blur-input', function(){
                $(element).blur();
            });

        }
    }

})

Then from the controllers, I do $scope.$broadcast('focus-input') and it focuses the current input on the page. When I removed these events, the keyboard worked properly. So I’m guessing the keyboard was just getting confused with focused inputs on other views or something. I’m going to try bluring all inputs when I leave a view see if that fixes it.


#6

Dang blurring all the inputs before entering that Create Profile view of mine didn’t work :frowning: . But if I never programmatically focus any inputs, it does work…hmmmm, let me see if I can get a basic example going.


#7

All right I got a sample app. With a combination of Ionic’s Keyboard, autofocusing an input, and <preference name="KeyboardDisplayRequiresUserAction" value="false"/> to my config.xml, I can replicate the funky behavior going on with upgrading to rc4.

Here is the compressed app.

So just download the app, unzip, and ionic build ios; ionic emulate ios it up.

I tried to be clear on what to do in the app, but you’ll see the app open, and autofocus an input, then you need to tap Max Lynch, and tap one of the inputs on the following view, you’ll see how high the view puts itself when the keyboard is shown.

Hope this helps.


#8

I recently upgraded to the latest 1.0.0 release, and this issue is still giving me problems, which is really unfortunate because I’d really like to use the 1.0.0 release. @mhartington were you ever able to download the compressed app above and check it out?


#9

Want to shoot me an email?
May be a bit faster and then we can post the fix here.