When developing, I sometimes leave the modal open when saving code (I use the live refresh), the modal remains open and there is no way to close, so I have to stop the program and restart it.
The app presumably refreshes, but the modal stays on top and cannot be closed
To see exact problem please see this gif what is happening...click to see gif
Related
I have some strange problem with browser tab freeze when working with React and Angular projects. Browser tab freezes when I save some file but only if I do something like click on hamburger menu that shows another component or any action with components or browser tab.
Example:
-> I change something in component (added more text, changed some color)
-> saved file to auto reload
-> I can see changes on my browser tab (it looks like browser tab is not "refreshing" but changes that I've made are visible after save)
-> I add something to my component (anything)
-> I can see changes on my browser tab and everything is fine every time when I add or change something. BUT when I try to do some action like click on hamburger menu button, click on some nav button that changes component or even when I click "Toggle device toolbar" in browser dev tools then my browser tab freezes. Rendered component is showing with big delay, when I click some button then action is delayed and I have to close browser tab but it takes a while to close when I click on it to close it.
This problem appears in every browser I use (chrome, brave, firefox). My computer system is Ubuntu 20.04.2 LTS. I use VSCode for coding.
I'm not sure if this problem appears because of some IDE or project configuration. I think it's because something in Ubuntu but I don't know what is going on.
Edit.
It does not matter if it is big project full of code and logic or new one with simple one "Hello, World!" component - the problem appears always.
I'm working on a React web app that has an iframe component to embed another web app. The parent app has functions to open or close (unmount) the iframe component. And the parent app uses real-time data subscription and it has the behavior to automatically close the iframe when it got a specific event. So it means that the iframe can be closed anytime.
Now onto the problem, both of the apps have input type="file" to upload file. If the iframe got unmounted while I have a "file select dialog" opened from within the iframe, the dialog would still be displayed unless I click the "cancel" button. But the thing is, after closing the file dialog and click Choose File in another input type="file", the file dialog will never show up again unless I refresh the page.
For more info:
the bug won't happen if I run any of the parent or iframe app in localhost, it only happen on the deployed site
Both of the apps is from same domain but with different pathname (ex. https://hello.com/parent and https://hello.com/iframe)
I'm not sure if this is a Chromium bug because it happens in Google Chrome and MS Edge, but not in Safari and Firefox.
I want to pop a modal with "Cancel" and "Yes" buttons when a user attempts to leave the single-page app.
To provide some context, I am working on a single page app that appears on a larger site that is not part of the single page app (so, the header and footer is part of the larger site, and single-page-app is the content). When a user attempts to leave to another part of the site (by clicking somewhere in the nav for instance) that is not part of the single page app, I want a warning modal to display with a warning. A user can close or refresh the page as much as they want, and it shouldn't pop a modal. Same thing if a user hard-codes a url (say, google.com in the browser), the modal should not pop.
So far the other similar threads I found on stackoverflow either uses Prompt component, or window.onbeforeunload. Both of these have the issue of them popping a default text box with a warning, and not a custom modal, which is an important problem, but that isn't all of the issue.
Prompt, to my understanding triggers whenever a user redirects within the single page app, which is not the behavior that I want.
window.onbeforeunload, to my undertstanding triggers even when refresh or close, which is not the behavior I want.
Maybe this isn't such a common problem, since I can't seem to find an easy solution for this, but any and all ideas are greatly appreciated.
Im working with the Ionic-Framework and AngularJS.
If you create the Ionic sidemenu sample project:
ionic start myApp sidemenu
You will get a small example application which shows my exact problem.
You can try out the behaviour here: Plunker
If you open up the Side-Menu and navigate to several locations everything
is put on the Back-Stack. How can I prevent that behaviour for special pages?
For our example lets say i always want to completely delete the Back-Stack
when the "playlists" page is called. My Application will run on mobile devices only and its very untypical to be able to press the back button in the main menu and be navigated to the last opended page.
I want Angular UI-Routing to simulate the Android Backing behaviour.
How can i achieve that?
Another problem is that the hardware back button seems to work different than the back button of the navigation bar. You can see that in the browser. If you navigate to a link from the side menu there wont appear a back button in the navigation bar (Like it should be!). But when you press the browser back button, suddenly a back button in the navigation bar appears (very uncool!). How to prevent that?
I'm having an issue only in Chrome where it seems that the download bar is interfering with my AngularJS app.
The process goes like this. I have a grid, using Ng-grid, on the page which displays around 3000 rows of data. I have a filter function that alters the filterText of the grid. All of this code works fine until after I've exported something and Chromes download bar pops up at the bottom of the page. My export function just takes whatever the user has highlighted from the grid and exports it to a csv file.
Once this is done, if the user tries to reset the filterText of the grid back to empty the page lags horribly, Chrome throws some error pop-ups, and will sometimes crash. There is no error in the console log and I have debugged and haven't found any errors thrown in there either.
The strange thing is that if you have Chrome open, and the download bar is already present then the above steps will work and the page will be fine. It only happens when the download bar first pops up on the page. If you filter the grid and then go to a different tab and download something, and the download bar pops up, then go back to the app tab and try and clear the filters it still freezes/lags.
I'm not sure what the problem is because all the code works fine if the download bar hasn't popped up or is already up before I export.
Still unsure what the root cause of the issue was, but by upgrading my ng-grid.js from 2.0.7 to 2.0.11 seems to have fixed the issue.