fix(form): fix layering issue with PT-input

sanity-io · Oct 3, 2022 · aa8561c · aa8561c
1 parent a7b2f81
commit aa8561c
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 12 deletions.
diff --git a/packages/sanity/src/form/inputs/PortableText/Compositor.styles.tsx b/packages/sanity/src/form/inputs/PortableText/Compositor.styles.tsx
@@ -52,7 +52,4 @@ export const ExpandedLayer = styled(Layer)`
   left: 0;
   right: 0;
   bottom: 0;
-  &:not([data-fullscreen]) {
-    position: relative;
-  }
 `
diff --git a/packages/sanity/src/form/inputs/PortableText/Compositor.tsx b/packages/sanity/src/form/inputs/PortableText/Compositor.tsx
@@ -311,14 +311,6 @@ export function Compositor(props: InputProps) {
     [portal.element, portalElement, wrapperElement]
   )
 
-  const editorLayer = useMemo(
-    () => (
-      <Portal __unstable_name={isFullscreen ? 'expanded' : 'collapsed'}>
-        <ExpandedLayer data-fullscreen={isFullscreen ? '' : undefined}>{children}</ExpandedLayer>
-      </Portal>
-    ),
-    [children, isFullscreen]
-  )
   return (
     <PortalProvider __unstable_elements={portalElements}>
       <ActivateOnFocus onActivate={onActivate} isOverlayActive={!isActive}>
@@ -330,7 +322,9 @@ export function Compositor(props: InputProps) {
         >
           <Root data-focused={hasFocus ? '' : undefined} data-read-only={readOnly ? '' : undefined}>
             <div data-wrapper="" ref={setWrapperElement}>
-              {editorLayer}
+              <Portal __unstable_name={isFullscreen ? 'expanded' : 'collapsed'}>
+                {isFullscreen ? <ExpandedLayer>{children}</ExpandedLayer> : children}
+              </Portal>
             </div>
             <div data-border="" />
           </Root>