I have implemented a login page in React and Material UI. When using in mobile, on certain phones the page refreshes automatically as soon as focus from one textfield goes away, and in another scenario, as soon as the keyboard pops up it refreshes. Anyone who has faced a similar issue, or any clue why this could be happening.
I tried calling the preventDefault method for onBlur event, but no change. Couldn't think of anything else, since observed the issue on some devices and not on others
Related
So we have a primereact components based app,
and the problem occurs when triggering the show of an overlay component
(usually a Dialog, but I've noticed it could also happen with Sidebar),
in a specific page that concerns with showing a table and the basic crud associated with it,
we show the form to create/update inside a Dialog,
when clicking the appropriate button the dialog shows..
only sometimes the dialog crashes and this error shows:
this have been happening for a very long time, and there were many attempts,
not even to fix it, but just to get the bug re-produced consistently.
couldnt do it...
of course tried finding a setState that could get stuck in a loop
any help would be appreciated :)
I have a form, when my user tries to reload, I need to show the popup "If you reload the page you cannot use this form".
the page is reloaded using a button in browsers
How to prevent reload and show custom popup ?
The browsers are designed to ask for confirmation with the native popup https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
And this cannot be customized (which would require async handling)
If the latter was possible people would get stuck on porn pages and would never have the chance to leave them.
I have a form in my react native app. When a user tries to fill it and tries to navigate back without saving it. I would like to show an alert to confirm this action. If the user decides to submit this form, the triggered back action must be canceled. On Android, the back button can be controlled with an event listener. But how can we achieve that on iOS using react navigation?
It's not possible currently. However, you could disable the swipe gesture on the screen instead.
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.
I would like to give a user notification if they have started an application and are navigating away without saving. Once they click on another tab, the componentWillUnmount function will fire, is there anyway I can cancel it in case a user decides to stay on the same form?
Since you are using React Router, see Confirming Navigation.