yourgov: Fix Add/Remove employee focus management… again (#1871)

.changeset/thick-sheep-occur.md

@@ -0,0 +1,5 @@
+---
+'@ag.ds-next/yourgov': minor
+---
+
+yourgov: Fix Add/Remove employee focus management… again.

yourgov/components/FormMobileFoodVendorPermit/steps/FormStep7.tsx

@@ -55,15 +55,6 @@ export function FormStep7() {
 	const [showAddedEmployeeMessage, setShowAddedEmployeeMessage] = useState(
 		!!addedEmployee
 	);
-	useEffect(() => {
-		setShowAddedEmployeeMessage(!!addedEmployee);
-
-		if (addedEmployee) {
-			setTimeout(() => {
-				addedPageAlertRef.current?.focus();
-			}, 500);
-		}
-	}, [addedEmployee]);
 
 	const closeModal = () => {
 		setShowAddedEmployeeMessage(false);
@@ -124,6 +115,24 @@ export function FormStep7() {
 		});
 	};
 
+	useEffect(() => {
+		setShowAddedEmployeeMessage(!!addedEmployee);
+
+		if (addedEmployee) {
+			setTimeout(() => {
+				addedPageAlertRef.current?.focus();
+			}, 500);
+		}
+	}, [addedEmployee]);
+
+	useEffect(() => {
+		if (removedEmployee) {
+			setTimeout(() => {
+				removedPageAlertRef.current?.focus();
+			}, 500);
+		}
+	}, [removedEmployee]);
+
 	return (
 		<FormContainer
 			formIntroduction="Add your employee details."
@@ -232,7 +241,6 @@ export function FormStep7() {
 						</Button>
 					</ButtonGroup>
 				}
-				elementToFocusOnClose={removedPageAlertRef?.current}
 				isOpen={modalIsVisible}
 				onClose={closeModal}
 				title={`Are you sure you want to remove ${employeeToRemove?.firstName} ${employeeToRemove?.lastName} as an employee?`}