fix: pop-up box positioning in prefilling row editor (#1192)

* fix: pop-up box positioning in prefilling row editor

* fix: incomplete display of grid view on mobile

apps/nextjs-app/src/features/app/blocks/share/view/component/grid/GridView.tsx

@@ -6,7 +6,6 @@ import { useIsHydrated } from '@teable/sdk/hooks';
 import { cn } from '@teable/ui-lib/shadcn';
 import { useRouter } from 'next/router';
 import { useContext } from 'react';
-import { isSafari } from '@/features/app/blocks/view/grid/utils/copyAndPaste';
 import { EmbedFooter } from '../../EmbedFooter';
 import { AggregationProvider } from './aggregation';
 import { GridViewBase } from './GridViewBase';
@@ -37,7 +36,7 @@ export const GridView = () => {
               <RowCountProvider>
                 {!hideToolBar && <Toolbar />}
                 {isHydrated && (
-                  <div className={cn('w-full grow overflow-hidden', isSafari() && 'pb-20 sm:pb-0')}>
+                  <div className="w-full grow overflow-hidden">
                     <GridViewBase groupPointsServerData={extra?.groupPoints} />
                   </div>
                 )}

apps/nextjs-app/src/features/app/blocks/share/view/component/grid/GridViewBase.tsx

@@ -46,7 +46,6 @@ import { uniqueId } from 'lodash';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useClickAway } from 'react-use';
-import { StatisticMenu } from '@/features/app/blocks/view/grid/components';
 import { DomBox } from '@/features/app/blocks/view/grid/DomBox';
 import { useGridSearchStore } from '@/features/app/blocks/view/grid/useGridSearchStore';
 import { ExpandRecordContainer } from '@/features/app/components/ExpandRecordContainer';

apps/nextjs-app/src/features/app/blocks/view/grid/GridView.tsx

@@ -1,11 +1,9 @@
 import { AggregationProvider, RecordProvider, RowCountProvider } from '@teable/sdk/context';
 import { SearchProvider } from '@teable/sdk/context/query';
 import { useIsHydrated } from '@teable/sdk/hooks';
-import { cn } from '@teable/ui-lib/shadcn';
 import { GridToolBar } from '../tool-bar/GridToolBar';
 import type { IViewBaseProps } from '../types';
 import { GridViewBase } from './GridViewBase';
-import { isSafari } from './utils/copyAndPaste';
 
 export const GridView = (props: IViewBaseProps) => {
   const { recordServerData, recordsServerData, groupPointsServerDataMap } = props;
@@ -18,9 +16,7 @@ export const GridView = (props: IViewBaseProps) => {
           <RowCountProvider>
             <GridToolBar />
             {isHydrated && (
-              <div
-                className={cn('w-full grow sm:pl-2 overflow-hidden', isSafari() && 'pb-20 sm:pb-0')}
-              >
+              <div className="w-full grow overflow-hidden sm:pl-2">
                 <GridViewBase groupPointsServerDataMap={groupPointsServerDataMap} />
               </div>
             )}

packages/sdk/src/components/grid-enhancements/hooks/use-grid-popup-position.tsx

@@ -1,21 +1,22 @@
 import { useMemo } from 'react';
-import { GRID_CONTAINER_ID } from '../../grid/configs';
-import type { IRectangle } from '../../grid/interface';
+import type { IEditorProps } from '../../grid/components';
+import { GRID_CONTAINER_ATTR } from '../../grid/configs';
 
 const SAFE_SPACING = 32;
 
-export const useGridPopupPosition = (rect: IRectangle, maxHeight?: number) => {
-  const { y, height } = rect;
+export const useGridPopupPosition = (rect: IEditorProps['rect'], maxHeight?: number) => {
+  const { y, height, editorId } = rect;
 
   return useMemo(() => {
-    const gridElement = document.querySelector('#' + GRID_CONTAINER_ID);
+    const editorElement = document.querySelector('#' + editorId);
+    const gridElement = editorElement?.closest(`[${GRID_CONTAINER_ATTR}]`);
     const gridBound = gridElement?.getBoundingClientRect();
 
     if (gridBound == null) return;
 
     const screenH = window.innerHeight;
     const { y: gridY } = gridBound;
-    const spaceAbove = y;
+    const spaceAbove = Math.max(y, gridY);
     const spaceBelow = screenH - gridY - y - height;
     const isAbove = spaceAbove > spaceBelow;
     const finalHeight = Math.min((isAbove ? y : spaceBelow) - SAFE_SPACING, maxHeight ?? Infinity);
@@ -25,5 +26,5 @@ export const useGridPopupPosition = (rect: IRectangle, maxHeight?: number) => {
       bottom: isAbove ? height : 'unset',
       maxHeight: finalHeight,
     };
-  }, [y, height, maxHeight]);
+  }, [editorId, y, height, maxHeight]);
 };

packages/sdk/src/components/grid/Grid.tsx

@@ -4,13 +4,7 @@ import type { CSSProperties, ForwardRefRenderFunction } from 'react';
 import { useState, useRef, useMemo, useCallback, useImperativeHandle, forwardRef } from 'react';
 import { useRafState } from 'react-use';
 import type { IGridTheme } from './configs';
-import {
-  gridTheme,
-  GRID_DEFAULT,
-  DEFAULT_SCROLL_STATE,
-  DEFAULT_MOUSE_STATE,
-  GRID_CONTAINER_ID,
-} from './configs';
+import { gridTheme, GRID_DEFAULT, DEFAULT_SCROLL_STATE, DEFAULT_MOUSE_STATE } from './configs';
 import { useResizeObserver } from './hooks';
 import type { ScrollerRef } from './InfiniteScroller';
 import { InfiniteScroller } from './InfiniteScroller';
@@ -533,7 +527,7 @@ const GridBase: ForwardRefRenderFunction<IGridRef, IGridProps> = (props, forward
   return (
     <div className="size-full" style={style} ref={ref}>
       <div
-        id={GRID_CONTAINER_ID}
+        data-t-grid-container
         ref={containerRef}
         tabIndex={0}
         className="relative outline-none"

packages/sdk/src/components/grid/components/editor/EditorContainer.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
+import { getRandomString } from '@teable/core';
 import { clamp } from 'lodash';
 import type { CSSProperties, ForwardRefRenderFunction } from 'react';
 import { useEffect, useRef, useMemo, useImperativeHandle, forwardRef } from 'react';
@@ -57,7 +58,7 @@ export interface IEditorRef<T extends IInnerCell = IInnerCell> {
 
 export interface IEditorProps<T extends IInnerCell = IInnerCell> {
   cell: T;
-  rect: IRectangle;
+  rect: IRectangle & { editorId: string };
   theme: IGridTheme;
   style?: CSSProperties;
   isEditing?: boolean;
@@ -118,6 +119,7 @@ export const EditorContainerBase: ForwardRefRenderFunction<
   const height = activeCellBound?.height ?? coordInstance.getRowHeight(rowIndex);
   const editorRef = useRef<IEditorRef | null>(null);
   const defaultFocusRef = useRef<HTMLInputElement | null>(null);
+  const editorId = useMemo(() => `editor-container-${getRandomString(8)}`, []);
 
   useImperativeHandle(ref, () => ({
     focus: () => editorRef.current?.focus?.(),
@@ -179,8 +181,9 @@ export const EditorContainerBase: ForwardRefRenderFunction<
       y,
       width,
       height,
+      editorId,
     };
-  }, [coordInstance, rowIndex, columnIndex, width, height, scrollLeft, scrollTop]);
+  }, [coordInstance, rowIndex, columnIndex, width, height, scrollLeft, scrollTop, editorId]);
 
   const EditorRenderer = useMemo(() => {
     if (readonly) return null;
@@ -294,7 +297,10 @@ export const EditorContainerBase: ForwardRefRenderFunction<
   };
 
   return (
-    <div className="click-outside-ignore pointer-events-none absolute left-0 top-0 w-full">
+    <div
+      id={editorId}
+      className="click-outside-ignore pointer-events-none absolute left-0 top-0 w-full"
+    >
       <div
         className="absolute z-10"
         style={{

packages/sdk/src/components/grid/configs/grid.ts

@@ -1,6 +1,6 @@
 import { DragRegionType, RegionType } from '../interface';
 
-export const GRID_CONTAINER_ID = '__t_grid_container_id';
+export const GRID_CONTAINER_ATTR = 'data-t-grid-container';
 
 export const GRID_DEFAULT = {
   // Row

packages/sdk/src/components/grid/hooks/useResizeObserver.ts

@@ -22,9 +22,13 @@ export function useResizeObserver<T extends HTMLElement = HTMLElement>(
 
   useLayoutEffect(() => {
     const resizeCallback: ResizeObserverCallback = (entries) => {
+      let diffHeight = document.body.clientHeight - window.innerHeight;
+      diffHeight = isNaN(diffHeight) ? 0 : diffHeight;
       for (const entry of entries) {
         const { width, height } = (entry && entry.contentRect) || {};
-        setSize((cv) => (cv.width === width && cv.height === height ? cv : { width, height }));
+        setSize((cv) =>
+          cv.width === width && cv.height === height ? cv : { width, height: height - diffHeight }
+        );
       }
     };