fix: ensure popovers display correctly when the plugin is invoked via an image input

Author: robinpyon

package-lock.json

@@ -57,7 +57,7 @@
     "@hookform/resolvers": "2.9.11",
     "@reduxjs/toolkit": "^1.9.0",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.0.0",
+    "@sanity/ui": "^1.7.0",
     "@tanem/react-nprogress": "^5.0.0",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.27.0",

package.json

@@ -1,8 +1,8 @@
 import type {MutationEvent} from '@sanity/client'
-import {Card, Flex, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
+import {Card, Flex, PortalProvider, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
 import {Asset, Tag} from '@types'
 import groq from 'groq'
-import React, {useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
 import {useDispatch} from 'react-redux'
 import type {AssetSourceComponentProps, SanityDocument} from 'sanity'
 import {TAG_DOCUMENT_NAME} from '../../constants'
@@ -33,6 +33,8 @@ type Props = {
 const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose']}) => {
   const client = useVersionedClient()
 
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+
   // Redux
   const dispatch = useDispatch()
 
@@ -98,31 +100,33 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose
   }, [])
 
   return (
-    <UploadDropzone>
-      <Dialogs />
-      <Notifications />
-
-      <Card display="flex" height="fill">
-        <Flex direction="column" flex={1}>
-          {/* Header */}
-          <Header onClose={onClose} />
-
-          {/* Browser Controls */}
-          <Controls />
-
-          <Flex flex={1}>
-            <Flex align="flex-end" direction="column" flex={1} style={{position: 'relative'}}>
-              <PickedBar />
-              <Items />
+    <PortalProvider element={portalElement}>
+      <UploadDropzone>
+        <Dialogs />
+        <Notifications />
+
+        <Card display="flex" height="fill" ref={setPortalElement}>
+          <Flex direction="column" flex={1}>
+            {/* Header */}
+            <Header onClose={onClose} />
+
+            {/* Browser Controls */}
+            <Controls />
+
+            <Flex flex={1}>
+              <Flex align="flex-end" direction="column" flex={1} style={{position: 'relative'}}>
+                <PickedBar />
+                <Items />
+              </Flex>
+              <TagsPanel />
             </Flex>
-            <TagsPanel />
-          </Flex>
 
-          {/* Debug */}
-          <DebugControls />
-        </Flex>
-      </Card>
-    </UploadDropzone>
+            {/* Debug */}
+            <DebugControls />
+          </Flex>
+        </Card>
+      </UploadDropzone>
+    </PortalProvider>
   )
 }
 

src/components/Browser/index.tsx

@@ -2,22 +2,18 @@ import {ClipboardIcon} from '@sanity/icons'
 import {Button, Popover, Text} from '@sanity/ui'
 import copy from 'copy-to-clipboard'
 import React, {useEffect, useRef, useState} from 'react'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 
 type Props = {
   disabled?: boolean
   url: string
 }
 
-const ButtonAssetCopy = (props: Props) => {
-  const {disabled, url} = props
-
-  // Refs
+const ButtonAssetCopy = ({disabled, url}: Props) => {
+  const popoverProps = usePortalPopoverProps()
   const refPopoverTimeout = useRef<ReturnType<typeof window.setTimeout>>()
-
-  // State
   const [popoverVisible, setPopoverVisible] = useState(false)
 
-  // Callbacks
   const handleClick = () => {
     if (refPopoverTimeout.current) {
       clearTimeout(refPopoverTimeout.current)
@@ -51,6 +47,7 @@ const ButtonAssetCopy = (props: Props) => {
       padding={2}
       placement="top"
       radius={1}
+      {...popoverProps}
     >
       <Button
         disabled={disabled}

src/components/ButtonAssetCopy/index.tsx

@@ -62,7 +62,7 @@ const useRootPortalElement = () => {
     return () => {
       document.body.removeChild(container)
     }
-  }, [])
+  }, [container])
 
   return container
 }

src/components/FormBuilderTool/index.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import {useDispatch} from 'react-redux'
 import {getOrderTitle} from '../../config/orders'
 import {ORDER_OPTIONS} from '../../constants'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions} from '../../modules/assets'
 
@@ -12,6 +13,8 @@ const OrderSelect = () => {
   const dispatch = useDispatch()
   const order = useTypedSelector(state => state.assets.order)
 
+  const popoverProps = usePortalPopoverProps()
+
   return (
     <MenuButton
       button={
@@ -51,6 +54,7 @@ const OrderSelect = () => {
           })}
         </Menu>
       }
+      popover={popoverProps}
     />
   )
 }

src/components/OrderSelect/index.tsx

@@ -8,6 +8,7 @@ import {
 import React from 'react'
 import {useDispatch} from 'react-redux'
 import {operators} from '../../config/searchFacets'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import {searchActions} from '../../modules/search'
 import SearchFacet from '../SearchFacet'
 import TextInputNumber from '../TextInputNumber'
@@ -16,12 +17,12 @@ type Props = {
   facet: SearchFacetInputNumberProps
 }
 
-const SearchFacetNumber = (props: Props) => {
-  const {facet} = props
-
+const SearchFacetNumber = ({facet}: Props) => {
   // Redux
   const dispatch = useDispatch()
 
+  const popoverProps = usePortalPopoverProps()
+
   const modifiers = facet?.modifiers
   const selectedModifier = facet?.modifier
     ? modifiers?.find(modifier => modifier.name === facet?.modifier)
@@ -75,6 +76,7 @@ const SearchFacetNumber = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 
@@ -116,6 +118,7 @@ const SearchFacetNumber = (props: Props) => {
               ))}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
     </SearchFacet>

src/components/SearchFacetNumber/index.tsx

@@ -11,17 +11,18 @@ import {useDispatch} from 'react-redux'
 import {operators} from '../../config/searchFacets'
 import {searchActions} from '../../modules/search'
 import SearchFacet from '../SearchFacet'
+import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 
 type Props = {
   facet: SearchFacetInputSelectProps
 }
 
-const SearchFacetSelect = (props: Props) => {
-  const {facet} = props
-
+const SearchFacetSelect = ({facet}: Props) => {
   // Redux
   const dispatch = useDispatch()
 
+  const popoverProps = usePortalPopoverProps()
+
   const options = facet?.options
 
   const selectedItem = options?.find(v => v.name === facet?.value)
@@ -73,6 +74,7 @@ const SearchFacetSelect = (props: Props) => {
               })}
             </Menu>
           }
+          popover={popoverProps}
         />
       )}
 
@@ -101,6 +103,7 @@ const SearchFacetSelect = (props: Props) => {
             ))}
           </Menu>
         }
+        popover={popoverProps}
       />
     </SearchFacet>
   )