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} } export type DialogProps = {