Feature #19065
FE - React - Fields dirty warning
| Status: | Closed | Start date: | 04 December 2023 | ||
|---|---|---|---|---|---|
| Priority: | Normal | Due date: | |||
| Assignee: | chok yee fan | % Done: | 80% | ||
| Category: | - | Spent time: | - | ||
| Target version: | - |
Description
R&D if the user entered the fields, but navigate to other page or refresh browser, should prompt warning.
Either using react hook form or react router v6 to do the checking
History
#1 Updated by Amirul Umar Pandai 11 months ago
- Status changed from New to In Progress
#2 Updated by Amirul Umar Pandai 11 months ago
- % Done changed from 0 to 80
New component is implemented for warning prompt when both navigating and reloading with dirty fields, but due to the way onbeforeunload event is enforced, custom UI cannot be implemented for reload event.
Reference:- https://developer.chrome.com/blog/chrome-51-deprecations/#remove_custom_messages_in_onbeforeunload_dialogs
- https://stackoverflow.com/a/276739
As such, both navigating and reloading have to use separate UI to handle warning message. Organisation profile form page includes this component as an example.
Will implement in the rest of the pages if this implementation would suffice.
#3 Updated by Amirul Umar Pandai 10 months ago
- Status changed from In Progress to Resolved
- Assignee changed from Amirul Umar Pandai to chok yee fan
prompt warning on dirty field (Organisation Profile form)
#4 Updated by chok yee fan 10 months ago
- File Screenshot 2023-12-14 at 10.34.24 AM.png added
- Status changed from Resolved to Feedback
- Assignee changed from chok yee fan to Amirul Umar Pandai
issue
-----
boostrap model alert.
expected
-----
use windows alert will do.
#5 Updated by Amirul Umar Pandai 10 months ago
- change Prompt component to hook, change modal to built-in window
#6 Updated by Amirul Umar Pandai 10 months ago
- Assignee changed from Amirul Umar Pandai to chok yee fan
#7 Updated by chok yee fan 10 months ago
- Assignee changed from chok yee fan to Amirul Umar Pandai
- upgrade 6.21.0 change at package.json
- use useBlocker from the library
- create another file for usePrompt don't put it into the hooks.tsx file. the hooks particular for ngrx store
#8 Updated by Amirul Umar Pandai 10 months ago
- Assignee changed from Amirul Umar Pandai to chok yee fan
- fix org profile modify button does nothing
- move usePrompt hook to own file
- re-organise org profile + user role code
#9 Updated by chok yee fan 10 months ago
- Assignee changed from chok yee fan to Amirul Umar Pandai
issue
-----
login -> navigate to org profile -> view org profile -> modify -> modify fields -> navigate to other link -> prompt -> click ok -> refresh the whole.
expected
-----
login -> navigate to org profile -> view org profile -> modify -> modify fields -> navigate to other link -> prompt -> click ok -> navigate to the page.
#10 Updated by Amirul Umar Pandai 10 months ago
- Assignee changed from Amirul Umar Pandai to chok yee fan
fix usePrompt refreshing page on navigate
#11 Updated by chok yee fan 9 months ago
- Assignee changed from chok yee fan to Amirul Umar Pandai
as per discussion in the morning meeting.
How the behaviour between cancel popup and dirty field popup ? Does it conflict how it behave?
#12 Updated by Amirul Umar Pandai 9 months ago
- Assignee changed from Amirul Umar Pandai to chok yee fan
Applied double prompt fix to all pages. Also fixed another issue where when executing navigate(-1) during cancel form, will sometimes accidentally prompt "Reload page?" window.
This conflicts with dirty field checking, where React Router library treats navigate(-1) as go back button for browser. This action, along with browser refresh, triggers the onbeforeunload event, which in turn prompts the "Reload page?" window.
Going forward, when navigating away from page with dirty field checking, should instead be navigate(path_to_previous_page).
e.g. from UserProfileForm.tsx, navigate(-1) should instead be navigate("/userProfile/search")
- Prevent "Reload page?" prompt on cancel form to go back to previous page
- Prevent double prompt for cancelling and navigating to new page
#13 Updated by chok yee fan 9 months ago
- File Screenshot 2024-01-29 at 11.39.07 AM.png added
- Assignee changed from chok yee fan to Amirul Umar Pandai
careless
issue
---
page still using navigate(-1)
expected
---
page NOT using navigate(-1)
#14 Updated by chok yee fan 9 months ago
- File Screenshot 2024-01-29 at 4.07.53 PM.png added
issue
-----
modify the field -> click cctopnavbar menu -> popup alert and click cancel -> click cctopnavbar menu -> navgiate to other page.
expected
-----
modify the field -> click cctopnavbar menu -> popup alert and click cancel -> click cctopnavbar menu -> SHOULD popup alert
#15 Updated by Amirul Umar Pandai 9 months ago
- Status changed from Feedback to Resolved
- Assignee changed from Amirul Umar Pandai to Hazimi Muhammad
MLEB Core:
Change cc_topnavbar links to href
MLEB IAM:
Persist popup on click topnavbar link after clicking "Cancel" more than once
#16 Updated by Hazimi Muhammad 9 months ago
- Status changed from Resolved to In Progress
- Assignee changed from Hazimi Muhammad to Amirul Umar Pandai
issue
-----
modify the field -> click cctopnavbar menu -> popup alert and click cancel -> click cctopnavbar menu -> navigate to other page.
expected
-----
modify the field -> click cctopnavbar menu -> popup alert and click cancel -> click cctopnavbar menu -> SHOULD popup alert
The issue are not solve yet. when i click the click cctopnavbar menu after cancel the popup alert, it still navigate to other page
#17 Updated by Amirul Umar Pandai 9 months ago
- Status changed from In Progress to Resolved
- Assignee changed from Amirul Umar Pandai to Hazimi Muhammad
Feature #19065 - revise usePrompt logic
#18 Updated by Hazimi Muhammad 9 months ago
- Status changed from Resolved to Feedback
- Assignee changed from Hazimi Muhammad to chok yee fan
Modify or add the field -> click cctopnavbar menu -> popup alert and click cancel -> click cctopnavbar menu -> popup alert is there
Already test for all module with same scenario and the result is same.