diff --git a/.changeset/seven-laws-pump.md b/.changeset/seven-laws-pump.md
new file mode 100644
index 0000000000..9bdc123330
--- /dev/null
+++ b/.changeset/seven-laws-pump.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+``: when a modal is closed, focus should be on disclosure
diff --git a/packages/ui/src/components/Modal/Disclosure.tsx b/packages/ui/src/components/Modal/Disclosure.tsx
index 476e1e9b64..1fa8836dca 100644
--- a/packages/ui/src/components/Modal/Disclosure.tsx
+++ b/packages/ui/src/components/Modal/Disclosure.tsx
@@ -1,11 +1,5 @@
import type { PropsWithRef } from 'react'
-import {
- cloneElement,
- createRef,
- isValidElement,
- useEffect,
- useMemo,
-} from 'react'
+import { cloneElement, isValidElement, useEffect, useMemo } from 'react'
import type { DisclosureProps } from './types'
export const Disclosure = ({
@@ -15,9 +9,8 @@ export const Disclosure = ({
handleClose,
toggle,
id,
+ disclosureRef,
}: DisclosureProps) => {
- const disclosureRef = createRef()
-
useEffect(() => {
const element = disclosureRef.current
element?.addEventListener('click', handleOpen)
diff --git a/packages/ui/src/components/Modal/index.tsx b/packages/ui/src/components/Modal/index.tsx
index bda4feaa13..7bdaa8e88b 100644
--- a/packages/ui/src/components/Modal/index.tsx
+++ b/packages/ui/src/components/Modal/index.tsx
@@ -1,7 +1,7 @@
import styled from '@emotion/styled'
import type { ReactElement, ReactNode } from 'react'
import type React from 'react'
-import { useCallback, useId, useState } from 'react'
+import { useCallback, useId, useRef, useState } from 'react'
import { Button } from '../Button'
import { Dialog } from './Dialog'
import { Disclosure } from './Disclosure'
@@ -77,6 +77,7 @@ export const Modal = ({
// Used for disclosure usage only
const [visible, setVisible] = useState(false)
const controlId = useId()
+ const disclosureRef = useRef(null)
const handleOpen = useCallback(() => {
setVisible(true)
@@ -92,7 +93,8 @@ export const Modal = ({
}
setVisible(false)
}
- }, [onBeforeClose, onClose])
+ disclosureRef.current?.focus()
+ }, [disclosureRef, onBeforeClose, onClose])
const handleToggle = useCallback(() => {
setVisible(current => !current)
@@ -111,6 +113,7 @@ export const Modal = ({
handleClose={handleClose}
visible={visible}
toggle={handleToggle}
+ disclosureRef={disclosureRef}
/>
) : null}