prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #3616 from omnivore-app/fix/web-dismiss-pointer

Browse source 
Attempt to wrap modal root onopenchange to handle pointer events
This commit is contained in:
Jackson Harper 2024-03-04 21:01:26 +08:00 committed by GitHub
commit 8d77341dd0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/web/components/patterns/ConfirmationModal.tsx
View file

@ -6,6 +6,7 @@ import {
import { VStack, HStack } from '../elements/LayoutPrimitives'
import { Button } from '../elements/Button'
import { StyledText } from '../elements/StyledText'
import { useCallback } from 'react'
type ConfirmationModalProps = {
message?: string
@ -18,8 +19,15 @@ type ConfirmationModalProps = {
}
export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
const safeOnOpenChange = useCallback(
(open: boolean) => {
document.body.style.removeProperty('pointer-events')
props.onOpenChange(open)
},
[props]
)
return (
<ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
<ModalRoot defaultOpen onOpenChange={safeOnOpenChange}>
<ModalOverlay />
<ModalContent css={{ bg: '$grayBg', maxWidth: '20em', zIndex: '20' }}>
<VStack alignment="center" distribution="center" css={{ p: '15px' }}>

16
packages/web/components/templates/article/SetLabelsModal.tsx
View file

@ -31,8 +31,9 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
const availableLabels = useGetLabelsQuery()
const [tabCount, setTabCount] = useState(-1)
const [tabStartValue, setTabStartValue] = useState('')
const [errorMessage, setErrorMessage] =
useState<string | undefined>(undefined)
const [errorMessage, setErrorMessage] = useState<string | undefined>(
undefined
)
const errorTimeoutRef = useRef<NodeJS.Timeout | undefined>()
const [highlightLastLabel, setHighlightLastLabel] = useState(false)
@ -169,8 +170,17 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
}
}, [highlightLastLabel, selectedLabels, dispatchLabels])
const safeOnOpenChange = useCallback(
(open: boolean) => {
console.log('safe on open change called')
document.body.style.removeProperty('pointer-events')
props.onOpenChange(open)
},
[props]
)
return (
<ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
<ModalRoot defaultOpen onOpenChange={safeOnOpenChange}>
<Dialog.Portal>
<ModalOverlay />
<ModalContent