When tap on ionicPopup, would bring up iOS keyboard if there is input behind the popup

[yxztj]

Tested on iOS7 Safari
http://codepen.io/anon/pen/fLiou

Expected behavior: Tap on ionicPopup wouldn't affect anything else on the page.

Actual behavior: Tap on ionicPopup would bring up keyboard if there is an input field behind the popup. The input looks like being focused, but there is no cursor in it. Can't input anything unless tap the input again.

[perrygovier]

Hey @yxztj, I'm having trouble reproducing this. Can you offer any more info about your specifc iOS version and steps to reproduce?

[marcusanzalone]

Say you have html 5 input type="number". If the ionicPopup button for the popup is physically located over the actual input box on the screen, the touch event for the button seems to get passed down to the input field underneath. It is very specific to only the area of the button that is over the input field.

This only happens on iOS (tested on 6 and 7), but does not happen on web or Android (4.3 was tested).

[yxztj]

Hi @perrygovier Thanks for the reply.
Just like @marcusanzalone said, in ionicPopup, if the button is over an input field on the page, the touch event seems to get passed to the input filed underneath.

I'm testing on iOS 7.0.4, iPhone 5
Step1: Open http://codepen.io/anon/pen/fLiou
Step2: Click '1x' on the bottom to adjust zoom level(Zoom level doesn't matter, just for clearer view)
Step3: Click 'Confirm' button, the popup would show up. Please note that the 'OK' button hover over the input field on the page.
Step4: Click 'OK' on the popup. Now iOS keyboard would be activated unexpectedly, as if the input field received tap event and ready to input.

Please let me know if you need additional information.

[perrygovier]

Ah, ok it doesn't happen on iOS 7.1. We'll take a look. Thanks for the additional info.

[marcusanzalone]

I am seeing this on the simulator for iOS 7.1. I've updated my example for issue #1549. If you run on the iPhone 4" iOS 7.1 simulator, use the second menu option "Reset Local Data" to bring up the ionic popup. I changed the background of the input field to gray in order to help see it in relation to the popup. The custom files can be downloaded at:

https://www.dropbox.com/s/k7s3l3mnhmcyx9b/sidemenu_withPopup.zip

[marcusanzalone]

I was not sure which ionic version my demo was using (probably 6, but unsure), so I pulled and build from master (00c80e8) and retested. It still occurs on 7.1 at master.

[marioese]

I experience the same problem, also on iOS 7.1.1 with beta 6.
As a workaround I added an additional $ionicBackdrop ($ionicBackdrop.retain()) which disappears after a 300 ms timeout ($ionicBackdrop.release()).
IMHO this is an ugly workaround but it will work for now.

[perrygovier]

Note this does not occur in ios8 or the safari packaged with yosemite

[frissonlabs]

This occurs on Android 4.4. The pop-up Yes/No button was located over an HTML5 date input which always gets triggered when tapping the pop-up button.

[frissonlabs]

I don't believe this fix will work when the input is in a modal and the popup is right over the open modal, since the backdrop doesn't affect it. At least it didn't work for me.

[ashconnell]

This is still happening in ios 8

[ashconnell]

I fixed this in a somewhat hackish way since the event passed into onTap is completely ignorant of propagation. I haven't looked into why because i needed a solution quickly.

var popup = $ionicPopup.show({
    title: title,
    template: msg,
    buttons: [{
        text: 'OK',
        type: 'button-positive',
        onTap: function(e) {
            e.stopPropagation();
            e.preventDefault();
            $timeout(function(){
                popup.close();
            }, 500);
        }
    }]
});

The e.*() calls are unnecessary because they don't actually work. If they did work, that would be all you need to stop the event bubbling up to the input.

The 500ms timeout allows the event to absorb itself (without bubbling up to the input) before closing the popup.

Yes, there is a slight delay to closing the popup, but this is 500% better UX than what currently happens:

1. popup closes
2. keyboard appears
3. the ion-scroll flips it's shit trying to figure out what input just focused
4. the input is not actually focused and does not show :focus styles.
5. Trying to then close the keyboard when the input is not actually focused is near impossible to the average user

[JonathanAquino]

I think @adamdbradley fixed this in 20d567f .

[adamdbradley]

Yes this should be fixed from 20d567f

Please reopen if you are still experiencing this within the nightly builds.

[jayaj12]

I am getting this issue in iPhone6 , 9.1 version, iphone 6s , 10.1.1
Tap on ionicPopup datepicker and select a date , would bring up dropdown if there is an select option dropdown behind the selected date.

[jamesdixon]

@adamdbradley I can confirm that this is still an issue. I'm seeing this on iOS 10.3, iPhone 7 plus, and Ionic 1.3.0.

In my case, it's a a date input behind the popup and it's triggered if it happens to behind the button that's tapped on the popup.

[s3c4]

This is not fixed.

iPhone 6
iOS 11.0.3
ionic 3.19.0

My problem is when I use ion-select and I tap OK button if I have an input/textarea/ another type of input underneath is automatically focused and open the keyboard.

[mstar0125]

I can still face same issue
iPhone 8 Plus
iOS 11.2
Ionic 2.2.2

Please provide me the solid resolution.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.