modal: Remove elementToFocusOnClose prop. (#1894)

agriculturegovau · Dec 3, 2024 · c70b445 · c70b445
1 parent b16fd60
commit c70b445
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 22 deletions.
diff --git a/.changeset/polite-flowers-exist.md b/.changeset/polite-flowers-exist.md
@@ -0,0 +1,5 @@
+---
+'@ag.ds-next/react': minor
+---
+
+modal: Remove `elementToFocusOnClose` prop.
diff --git a/packages/react/src/modal/Modal.tsx b/packages/react/src/modal/Modal.tsx
@@ -14,7 +14,6 @@ export type ModalProps = ModalDialogProps & {
 export const Modal: FunctionComponent<ModalProps> = ({
 	actions,
 	children,
-	elementToFocusOnClose,
 	isOpen = false,
 	onClose,
 	onDismiss,
@@ -48,12 +47,7 @@ export const Modal: FunctionComponent<ModalProps> = ({
 		<Fragment>
 			<LockScroll />
 			<ModalCover ref={modalContainerRef}>
-				<ModalDialog
-					actions={actions}
-					elementToFocusOnClose={elementToFocusOnClose}
-					onClose={closeHandler}
-					title={title}
-				>
+				<ModalDialog actions={actions} onClose={closeHandler} title={title}>
 					{children}
 				</ModalDialog>
 			</ModalCover>

diff --git a/packages/react/src/modal/ModalDialog.tsx b/packages/react/src/modal/ModalDialog.tsx
@@ -13,8 +13,6 @@ import { useModalId } from './utils';
 export type ModalDialogProps = PropsWithChildren<{
 	/** The actions to display at the bottom of the modal panel. Typically a `ButtonGroup`. */
 	actions?: ReactNode;
-	/** On close of the modal, this element will be focused, rather than the trigger element. */
-	elementToFocusOnClose?: HTMLElement | null;
 	/** Function to be called when the 'Close' button is pressed. */
 	onClose?: () => void;
 	/** @deprecated use `onClose` instead */
@@ -28,26 +26,14 @@ const MAX_WIDTH = '45rem'; // 720 px
 export const ModalDialog = ({
 	actions,
 	children,
-	elementToFocusOnClose,
 	onClose,
 	onDismiss,
 	title,
 }: ModalDialogProps) => {
 	const closeHandler = getRequiredCloseHandler(onClose, onDismiss);
 	const { titleId } = useModalId();
 	return (
-		<FocusLock
-			returnFocus={
-				elementToFocusOnClose
-					? () => {
-							// Running focus after focus-lock-react does its cleanup, more info here: https://github.com/theKashey/react-focus-lock#unmounting-and-focus-management
-							window.setTimeout(() => elementToFocusOnClose.focus(), 0);
-
-							return false;
-					  }
-					: true // Return focus to trigger on close
-			}
-		>
+		<FocusLock returnFocus>
 			<Stack
 				aria-labelledby={titleId}
 				aria-modal="true"