Feature #19065

FE - React - Fields dirty warning

Added by chok yee fan about 1 year ago. Updated 10 months ago.

Status:ClosedStart date:04 December 2023
Priority:NormalDue 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

Screenshot 2023-12-14 at 10.34.24 AM.png - boostrapAlert (112 KB) chok yee fan, 14 December 2023 10:34 AM

Screenshot 2024-01-29 at 11.39.07 AM.png - userProfile still using navigate(-1) (219 KB) chok yee fan, 29 January 2024 11:39 AM

Screenshot 2024-01-29 at 4.07.53 PM.png (571 KB) chok yee fan, 29 January 2024 04:07 PM

History

#1 Updated by Amirul Umar Pandai about 1 year ago

  • Status changed from New to In Progress

#2 Updated by Amirul Umar Pandai about 1 year 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:
  1. https://developer.chrome.com/blog/chrome-51-deprecations/#remove_custom_messages_in_onbeforeunload_dialogs
  2. 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 about 1 year ago

  • Status changed from In Progress to Resolved
  • Assignee changed from Amirul Umar Pandai to chok yee fan

#4 Updated by chok yee fan about 1 year ago

issue
-----
boostrap model alert.

expected
-----
use windows alert will do.

#6 Updated by Amirul Umar Pandai about 1 year ago

  • Assignee changed from Amirul Umar Pandai to chok yee fan

#7 Updated by chok yee fan about 1 year 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 about 1 year 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

https://dev.silverlakemobility.com/gitlab/mleb-solution-domain/smesd100/mleb-iam/-/commit/b3c05da00efe3b92cf2c23f8f4134dfdcd251bb2

#9 Updated by chok yee fan 12 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 12 months ago

  • Assignee changed from Amirul Umar Pandai to chok yee fan

#11 Updated by chok yee fan 12 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 12 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

https://dev.silverlakemobility.com/gitlab/mleb-solution-domain/smesd100/mleb-iam/-/commit/31c84ca0476696b81bddd20df08accd01d8efa0b

#13 Updated by chok yee fan 11 months ago

careless

issue
---
page still using navigate(-1)

expected
---
page NOT using navigate(-1)

#14 Updated by chok yee fan 11 months ago

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 11 months ago

  • Status changed from Feedback to Resolved
  • Assignee changed from Amirul Umar Pandai to Hazimi Muhammad

#16 Updated by Hazimi Muhammad 11 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 11 months ago

  • Status changed from In Progress to Resolved
  • Assignee changed from Amirul Umar Pandai to Hazimi Muhammad

#18 Updated by Hazimi Muhammad 11 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.

#19 Updated by chok yee fan 10 months ago

  • Status changed from Feedback to Closed

working as expected

Also available in: Atom PDF