New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ionic Popover freezes after refreshing the page #8582

Closed
amiral84 opened this Issue Oct 9, 2016 · 14 comments

Comments

Projects
None yet
8 participants
@amiral84

amiral84 commented Oct 9, 2016

Hi everyone,

I found very interesting problem regarding ionic popover component. I made a test in my project by having same code like in Ionic Framework website at http://ionicframework.com/docs/api/service/$ionicPopover/ and first it works fine, but when I turn on the developer tools of Chrome on, open the mobile toolbar where you can see how it looks like in the mobile and change the mobile phone type and refresh the page, styles of ionic popover gets messy (losing style values) and logic of angular function breaks.

What I mean with angular function breaks is for example if I would have ng-click="closePopover()" it simply won't work, nothing happens. Could this be a bug? If yes could you fix it as well?

Also I had similar kind of case with other project and funny thing in this case is that whenever I open the project with ionic serve first time everything works fine except on mobile phones and when I refresh the page of that popover in the Chrome developer tools same thing happens, angular function logic breaks.

@sarthakm1011

This comment has been minimized.

Show comment
Hide comment
@sarthakm1011

sarthakm1011 Oct 10, 2016

Hello ,
If event ng-click="closePopover()" is being executed when there is no popover it won't do anything.It is perfectly fine then but if it is being executed after ng-click="openPopover()" is executed then it should close that popover. If none of them is working then it must be a bug.

sarthakm1011 commented Oct 10, 2016

Hello ,
If event ng-click="closePopover()" is being executed when there is no popover it won't do anything.It is perfectly fine then but if it is being executed after ng-click="openPopover()" is executed then it should close that popover. If none of them is working then it must be a bug.

@amiral84

This comment has been minimized.

Show comment
Hide comment
@amiral84

amiral84 Oct 10, 2016

Hi @sarthakm1011. ng-click="closePopover() is not executed outside the popover. Meaning that when I open the popover it contains "X" icon which ng-click="closePopover()" is binded to.

EDIT:
After testing for while I found out that it works properly ONLY when you open a new window.

amiral84 commented Oct 10, 2016

Hi @sarthakm1011. ng-click="closePopover() is not executed outside the popover. Meaning that when I open the popover it contains "X" icon which ng-click="closePopover()" is binded to.

EDIT:
After testing for while I found out that it works properly ONLY when you open a new window.

@jgw96 jgw96 added the v1 label Oct 10, 2016

@sarthakm1011

This comment has been minimized.

Show comment
Hide comment
@sarthakm1011

sarthakm1011 Oct 10, 2016

Yes it works only when a new window is opened . It's similar to a modal.

sarthakm1011 commented Oct 10, 2016

Yes it works only when a new window is opened . It's similar to a modal.

@amiral84

This comment has been minimized.

Show comment
Hide comment
@amiral84

amiral84 Oct 11, 2016

@sarthakm1011 no, what I mean is when I open a new window tab in browser it works for first time, but when you hit refresh again there it doesn't work. Also with mobiles when I prepare the project for example with android by using cordova prepare android and then build it in IntelliJ Idea to get the .apk file then it doesn't work at all in mobile. I have tested same with iPhones as well, same thing happens.

amiral84 commented Oct 11, 2016

@sarthakm1011 no, what I mean is when I open a new window tab in browser it works for first time, but when you hit refresh again there it doesn't work. Also with mobiles when I prepare the project for example with android by using cordova prepare android and then build it in IntelliJ Idea to get the .apk file then it doesn't work at all in mobile. I have tested same with iPhones as well, same thing happens.

@amiral84

This comment has been minimized.

Show comment
Hide comment
@amiral84

amiral84 Oct 11, 2016

After long inspection in the DOM components of this component I found out that <ion-popover-view> messed up everything and it broke also the logic of the popover. Once I deleted it, everything worked fine.

So there is a bug in this component that should be fixed.

amiral84 commented Oct 11, 2016

After long inspection in the DOM components of this component I found out that <ion-popover-view> messed up everything and it broke also the logic of the popover. Once I deleted it, everything worked fine.

So there is a bug in this component that should be fixed.

@tcunningham07

This comment has been minimized.

Show comment
Hide comment
@tcunningham07

tcunningham07 Nov 4, 2016

I ran into this issue as well.

I was able to fork from the Popover: Nightly codepen and replicate the issue.
Link - https://codepen.io/tcun/full/pNoRWV/

To cause the issue, open the popover, then the modal (click 'Add Comment'). From there, exit the modal using the close button (submit does nothing).

After the modal is closed, nothing can be clicked until the pen is refreshed. If the tags are removed from the popover template, the issue is resolved as @amiral84 has said previously.

tcunningham07 commented Nov 4, 2016

I ran into this issue as well.

I was able to fork from the Popover: Nightly codepen and replicate the issue.
Link - https://codepen.io/tcun/full/pNoRWV/

To cause the issue, open the popover, then the modal (click 'Add Comment'). From there, exit the modal using the close button (submit does nothing).

After the modal is closed, nothing can be clicked until the pen is refreshed. If the tags are removed from the popover template, the issue is resolved as @amiral84 has said previously.

@clintghosn

This comment has been minimized.

Show comment
Hide comment
@clintghosn

clintghosn Nov 9, 2016

Any news on this? I am currently experiencing the exact same issue as described above by @tcunningham07

clintghosn commented Nov 9, 2016

Any news on this? I am currently experiencing the exact same issue as described above by @tcunningham07

@ach

This comment has been minimized.

Show comment
Hide comment
@ach

ach Nov 10, 2016

I'm having trouble with this as well. It occur when I open a modal from popover. A class popover-open exists in my document root which block entire GUI from clicks.

@tcunningham07 codepen demostrate the issue

ach commented Nov 10, 2016

I'm having trouble with this as well. It occur when I open a modal from popover. A class popover-open exists in my document root which block entire GUI from clicks.

@tcunningham07 codepen demostrate the issue

@GabrielGMartinsBr

This comment has been minimized.

Show comment
Hide comment
@GabrielGMartinsBr

GabrielGMartinsBr Nov 12, 2016

Here I solved it closing the popover and using a timeout before opening the modal, look

        $scope.openModal = function(){
            if(!$scope.modal) return;       

            // Call a function to close the popover
            $scope.closePopover();      

            // Set a timeout to show the modal only in next cycle
            $timeout(function(){
                $scope.modal.show()
            }, 0);
        });

GabrielGMartinsBr commented Nov 12, 2016

Here I solved it closing the popover and using a timeout before opening the modal, look

        $scope.openModal = function(){
            if(!$scope.modal) return;       

            // Call a function to close the popover
            $scope.closePopover();      

            // Set a timeout to show the modal only in next cycle
            $timeout(function(){
                $scope.modal.show()
            }, 0);
        });
@jlamber4

This comment has been minimized.

Show comment
Hide comment
@jlamber4

jlamber4 Nov 23, 2016

I also have this problem, but in reverse. If I open a popover from within a modal - after closing the modal - the screen is unable to be clicked. Closing the popover does not remove the popover-open css class from the body

jlamber4 commented Nov 23, 2016

I also have this problem, but in reverse. If I open a popover from within a modal - after closing the modal - the screen is unable to be clicked. Closing the popover does not remove the popover-open css class from the body

@jlamber4

This comment has been minimized.

Show comment
Hide comment
@jlamber4

jlamber4 Nov 23, 2016

I bandaided a fix by adding the following method to the modal controller (that also starts the popover)

$scope.$on('popover.hidden', function() {
$scope.popover.remove();
$scope.popover = null;
$('body').removeClass("popover-open");
});

jlamber4 commented Nov 23, 2016

I bandaided a fix by adding the following method to the modal controller (that also starts the popover)

$scope.$on('popover.hidden', function() {
$scope.popover.remove();
$scope.popover = null;
$('body').removeClass("popover-open");
});

@ach

This comment has been minimized.

Show comment
Hide comment
@ach

ach Nov 24, 2016

I think this relates to #9069. I reverted to v1.3.1, waiting for a solution in latest release.

ach commented Nov 24, 2016

I think this relates to #9069. I reverted to v1.3.1, waiting for a solution in latest release.

@jgw96

This comment has been minimized.

Show comment
Hide comment
@jgw96

jgw96 Jan 13, 2017

Contributor

This issue was moved to ionic-team/ionic-v1#86

Contributor

jgw96 commented Jan 13, 2017

This issue was moved to ionic-team/ionic-v1#86

@jgw96 jgw96 closed this Jan 13, 2017

@ionic-issue-bot

This comment has been minimized.

Show comment
Hide comment
@ionic-issue-bot

ionic-issue-bot bot Sep 4, 2018

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.

ionic-issue-bot bot commented Sep 4, 2018

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.

@ionic-issue-bot ionic-issue-bot bot locked and limited conversation to collaborators Sep 4, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.