Default for PortalElement #253

BrianHung · 2022-04-08T21:22:21Z

BrianHung
Apr 8, 2022
Collaborator

data-grid-overlay-editor attach itself to body if no portalElement is given and wrap itself in a div with position: fixed; left: 0; top: 0; z-index: 9999;, instead of erroring out and not rendering.

glide-data-grid/packages/core/src/data-grid-overlay-editor/data-grid-overlay-editor.tsx

Lines 167 to 193 in e62d735

    
           // Consider imperatively creating and adding the element to the dom? 
        
           const portalElement = document.getElementById("portal"); 
        
           if (portalElement === null) { 
        
               // eslint-disable-next-line no-console 
        
               console.error( 
        
                   'Cannot open Data Grid overlay editor, because portal not found.  Please add `<div id="portal" />` as the last child of your `<body>`.' 
        
               ); 
        
               return null; 
        
           } 
        
           const portal = createPortal( 
        
               <ClickOutsideContainer className={className} onClickOutside={onClickOutside}> 
        
                   <DataGridOverlayEditorStyle 
        
                       ref={ref} 
        
                       id={id} 
        
                       className={style ? "gdg-style" : "gdg-unstyle"} 
        
                       style={styleOverride} 
        
                       as={useLabel === true ? "label" : undefined} 
        
                       targetRect={target} 
        
                       pad={pad}> 
        
                       <div className="clip-region" onKeyDown={customEditor === undefined ? undefined : onKeyDownCustom}> 
        
                           {editor} 
        
                       </div> 
        
                   </DataGridOverlayEditorStyle> 
        
               </ClickOutsideContainer>, 
        
               portalElement 
        
           );

Inspiration taken from radix/primitive:

https://github.com/radix-ui/primitives/blob/4dd90f1d38482e66cf4fd2970885d99a8fb3391c/packages/react/portal/src/Portal.tsx#L22-L65

jassmith · 2022-04-08T23:27:39Z

jassmith
Apr 8, 2022
Maintainer

I wonder if we can do this without breaking back compat

1 reply

BrianHung Apr 9, 2022
Collaborator Author

Seems to only be used twice within the codebase: https://github.com/glideapps/glide-data-grid/search?q=portal

glide-data-grid/packages/core/src/data-grid-overlay-editor/data-grid-overlay-editor.tsx

Line 168 in e62d735

const portalElement = document.getElementById("portal");

glide-data-grid/packages/cells/src/cells/dropdown-cell.tsx

Line 51 in e62d735

menuPortalTarget={document.getElementById("portal")}

Maybe

document.getElementById("portal") ?? document.body

can work?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Default for PortalElement #253

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Default for PortalElement #253

BrianHung Apr 8, 2022 Collaborator

Replies: 1 comment · 1 reply

jassmith Apr 8, 2022 Maintainer

BrianHung Apr 9, 2022 Collaborator Author

BrianHung
Apr 8, 2022
Collaborator

Replies: 1 comment 1 reply

jassmith
Apr 8, 2022
Maintainer

BrianHung Apr 9, 2022
Collaborator Author