Merge pull request #3603 from omnivore-app/fix/web-modal-interaction-outside

Handle interaction outside modals

packages/web/components/patterns/CardMenu.tsx

@@ -58,7 +58,7 @@ export function CardMenu(props: CardMenuProps): JSX.Element {
       />
       <DropdownOption
         onSelect={() => props.actionHandler('editTitle')}
-        title="Edit metadata"
+        title="Edit info"
       />
       {props.item.readingProgressPercent < 98 ? (
         <DropdownOption

packages/web/components/templates/KeyboardShortcutListModal.tsx

@@ -150,9 +150,8 @@ export function KeyboardShortcutListModal(
             minWidth: '320px',
           },
         }}
-        onInteractOutside={() => {
-          // remove focus from modal
-          ;(document.activeElement as HTMLElement).blur()
+        onInteractOutside={(event) => {
+          event.preventDefault()
         }}
       >
         <VStack

packages/web/components/templates/UploadModal.tsx

@@ -284,9 +284,8 @@ export function UploadModal(props: UploadModalProps): JSX.Element {
           minWidth: '650px',
           minHeight: '430px',
         }}
-        onInteractOutside={() => {
-          // remove focus from modal
-          ;(document.activeElement as HTMLElement).blur()
+        onInteractOutside={(event) => {
+          event.preventDefault()
         }}
       >
         <VStack distribution="start">

packages/web/components/templates/homeFeed/AddLinkModal.tsx

@@ -57,9 +57,8 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
           maxHeight: '300',
           fontFamily: '$inter',
         }}
-        onInteractOutside={() => {
-          // remove focus from modal
-          ;(document.activeElement as HTMLElement).blur()
+        onInteractOutside={(event) => {
+          event.preventDefault()
         }}
       >
         <VStack distribution="start" css={{ gap: '20px' }}>
@@ -82,8 +81,9 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
 }
 
 const AddLinkTab = (props: AddLinkModalProps): JSX.Element => {
-  const [errorMessage, setErrorMessage] =
-    useState<string | undefined>(undefined)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
 
   const addLink = useCallback(
     async (link: string) => {
@@ -104,8 +104,9 @@ const AddLinkTab = (props: AddLinkModalProps): JSX.Element => {
 }
 
 const AddFeedTab = (props: AddLinkModalProps): JSX.Element => {
-  const [errorMessage, setErrorMessage] =
-    useState<string | undefined>(undefined)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
 
   const subscribe = useCallback(
     async (feedUrl: string) => {

packages/web/components/templates/homeFeed/EditItemModals.tsx

@@ -217,7 +217,6 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
       defaultOpen
       modal={true}
       onOpenChange={() => {
-        console.log('props.onOpenChange')
         props.onOpenChange(false)
       }}
       css={{}}
@@ -225,9 +224,8 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
       <ModalOverlay />
       <ModalContent
         css={{ bg: '$grayBg', p: '20px', maxWidth: '480px' }}
-        onInteractOutside={() => {
-          // remove focus from modal
-          ;(document.activeElement as HTMLElement).blur()
+        onInteractOutside={(event) => {
+          event.preventDefault()
         }}
         onEscapeKeyDown={(event) => {
           props.onOpenChange(false)

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -1180,7 +1180,10 @@ export function LibraryItemsLayout(
           updateItem={(item: LibraryItem) =>
             props.actionHandler('update-item', item)
           }
-          onOpenChange={() => props.setShowEditTitleModal(false)}
+          onOpenChange={() => {
+            props.setShowEditTitleModal(false)
+            props.setLinkToEdit(undefined)
+          }}
           item={props.linkToEdit as LibraryItem}
         />
       )}

packages/web/pages/settings/emails/recent.tsx

@@ -108,9 +108,8 @@ const ViewRecentEmailModal = (
           width: '100%',
           maxWidth: '650px',
         }}
-        onInteractOutside={() => {
-          // remove focus from modal
-          ;(document.activeElement as HTMLElement).blur()
+        onInteractOutside={(event) => {
+          event.preventDefault()
         }}
       >
         <VStack distribution="start" css={{ height: '100%' }}>
@@ -152,11 +151,13 @@ const ViewRecentEmailModal = (
 
 export default function RecentEmails(): JSX.Element {
   const { recentEmails, revalidate, isValidating } = useGetRecentEmailsQuery()
-  const [viewingEmailText, setViewingEmailText] =
-    useState<RecentEmail | undefined>(undefined)
+  const [viewingEmailText, setViewingEmailText] = useState<
+    RecentEmail | undefined
+  >(undefined)
 
-  const [viewingEmailHtml, setViewingEmailHtml] =
-    useState<RecentEmail | undefined>(undefined)
+  const [viewingEmailHtml, setViewingEmailHtml] = useState<
+    RecentEmail | undefined
+  >(undefined)
 
   applyStoredTheme()