Interface elements flashes when keyboard appears / disappears


#1

Hello. I’m having a small but annoying issue with keyboard in my app with Android. In my header I have a button which opens a popup containing some textfields. When I click on one of the textfields, thus causing the keyboard to pop in, it seems that all the elements (at least the button in the header and the list below the popup) do some sort of repaint, which results in a quick flash. The same is when I hide the keyboard. It’s pretty clear that this is due to the popup resizing in order to allow all the content to be clickable; but is there a way to prevent this? I’m linking a video below.

Test video


#2

Hi i already experienced this issues on ios and android , what i did instead of set focus on first input of modal i used set focus directive with a timeout about 200ms that makes your keyboard open looks smooth and prevent this issue. At least for me worked very well


#3

Thanks for your reply. First of all, can you point me to a doc of this directive? I can’t seem ti find it anywhere…

Anyway, I tried cordova.plugins.Keyboard.show(); to open up the keyboard as soon as the popup shows (technically this call is even before the $ionicPopup.show()) but the problem still occurs. I’m afraid it’s not a matter of when the keyboard is shown, but more an issue of the resizing caused by the keyboard itself.


#4

Yes your are right could also related with Ionic resize done when keyboard is open. Actually i am using a Cordova OpenSource alternative that doesn´t have this keyboard integration with Ionic. and i use this :

function searchFocus($timeout) {
        return {
            link: function (scope, element) {
                $timeout(function () {
                    element[0].focus();
                }, 500);
            }
        };
    }

Is the same directive that almost everybody is using i just changed the timeout time to show little later than usual and at moment no issues at all.