From 3a97e744a0a955eae9dc0e9c831a98647e0be068 Mon Sep 17 00:00:00 2001
From: lisalupi <106706307+lisalupi@users.noreply.github.com>
Date: Fri, 5 Jul 2024 10:41:13 +0200
Subject: [PATCH] fix: focus on close modal (#3967)

---
 .changeset/seven-laws-pump.md                   |  5 +++++
 packages/ui/src/components/Modal/Disclosure.tsx | 11 ++---------
 packages/ui/src/components/Modal/index.tsx      |  7 +++++--
 packages/ui/src/components/Modal/types.ts       |  1 +
 4 files changed, 13 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/seven-laws-pump.md

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
+---
+
+`<Modal />`: 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<HTMLElement>()
-
   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<HTMLElement>(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}
       <Dialog
diff --git a/packages/ui/src/components/Modal/types.ts b/packages/ui/src/components/Modal/types.ts
index fec771c8ec..dc44ce11bd 100644
--- a/packages/ui/src/components/Modal/types.ts
+++ b/packages/ui/src/components/Modal/types.ts
@@ -41,6 +41,7 @@ export type DisclosureProps = {
   visible: ModalState['visible']
   toggle: ModalState['toggle']
   id: string
+  disclosureRef: React.RefObject<HTMLElement>
 }
 
 export type DialogProps = {