Skip to content

Commit

Permalink
Revert "fix: focus on close modal (#3967)"
Browse files Browse the repository at this point in the history
This reverts commit 3a97e74.
  • Loading branch information
matthprost committed Jul 9, 2024
1 parent 74fdd05 commit 5292de8
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 8 deletions.
5 changes: 5 additions & 0 deletions .changeset/beige-ladybugs-kiss.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ultraviolet/ui": patch
---

Hotfix of `<Modal />` component not working properly with disclosure
11 changes: 9 additions & 2 deletions packages/ui/src/components/Modal/Disclosure.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import type { PropsWithRef } from 'react'
import { cloneElement, isValidElement, useEffect, useMemo } from 'react'
import {
cloneElement,
createRef,
isValidElement,
useEffect,
useMemo,
} from 'react'
import type { DisclosureProps } from './types'

export const Disclosure = ({
Expand All @@ -9,8 +15,9 @@ export const Disclosure = ({
handleClose,
toggle,
id,
disclosureRef,
}: DisclosureProps) => {
const disclosureRef = createRef<HTMLElement>()

useEffect(() => {
const element = disclosureRef.current
element?.addEventListener('click', handleOpen)
Expand Down
7 changes: 2 additions & 5 deletions packages/ui/src/components/Modal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from '@emotion/styled'
import type { ReactElement, ReactNode } from 'react'
import type React from 'react'
import { useCallback, useId, useRef, useState } from 'react'
import { useCallback, useId, useState } from 'react'
import { Button } from '../Button'
import { Dialog } from './Dialog'
import { Disclosure } from './Disclosure'
Expand Down Expand Up @@ -77,7 +77,6 @@ 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)
Expand All @@ -93,8 +92,7 @@ export const Modal = ({
}
setVisible(false)
}
disclosureRef.current?.focus()
}, [disclosureRef, onBeforeClose, onClose])
}, [onBeforeClose, onClose])

const handleToggle = useCallback(() => {
setVisible(current => !current)
Expand All @@ -113,7 +111,6 @@ export const Modal = ({
handleClose={handleClose}
visible={visible}
toggle={handleToggle}
disclosureRef={disclosureRef}
/>
) : null}
<Dialog
Expand Down
1 change: 0 additions & 1 deletion packages/ui/src/components/Modal/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export type DisclosureProps = {
visible: ModalState['visible']
toggle: ModalState['toggle']
id: string
disclosureRef: React.RefObject<HTMLElement>
}

export type DialogProps = {
Expand Down

0 comments on commit 5292de8

Please sign in to comment.