diff --git a/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx b/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx index 0535ec2..73ca9cd 100644 --- a/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx +++ b/dictation_client/src/pages/LicensePage/cardLicenseIssuePopup.tsx @@ -28,9 +28,27 @@ export const CardLicenseIssuePopup: React.FC = ( const dispatch: AppDispatch = useDispatch(); const initCount = useSelector(selectNumberOfCreateLicenses); const [count, setCount] = useState(initCount); - const isLoading = useSelector(selectIsLoading); + // ブラウザのウィンドウが閉じられようとしている場合に発火するイベントハンドラ + const handleBeforeUnload = (e: BeforeUnloadEvent) => { + // isLoadingがtrueの場合は確認ダイアログを表示する + if (isLoading) { + e.preventDefault(); + // ChromeではreturnValueが必要 + e.returnValue = ""; + } + }; + + // コンポーネントがマウントされた時にイベントハンドラを登録する + useEffect(() => { + window.addEventListener("beforeunload", handleBeforeUnload); + // コンポーネントがアンマウントされるときにイベントハンドラを解除する + return () => { + window.removeEventListener("beforeunload", handleBeforeUnload); + }; + }); + useEffect( () => () => { // useEffectのreturnとしてcleanupAppsを実行することで、ポップアップのアンマウント時に初期化を行う @@ -41,9 +59,11 @@ export const CardLicenseIssuePopup: React.FC = ( // ポップアップを閉じる処理 const closePopup = useCallback(() => { - // setIsPushIssueButton(false); + if (isLoading) { + return; + } onClose(); - }, [onClose]); + }, [isLoading, onClose]); // 画面からのパラメータ const createCount = useSelector(selectNumberOfCreateLicenses);