fix: enable scroll in table columns configs popup

raheeliftikhar5 · raheeliftikhar5 · commit f606a4ca0b67 · 2023-12-07T21:50:17.000+05:00
diff --git a/client/packages/lowcoder-design/src/components/option.tsx b/client/packages/lowcoder-design/src/components/option.tsx
@@ -153,8 +153,9 @@ const OptionItem = (props: {
   popoverTitle?: string;
   draggable?: boolean;
   optionExtra?: React.ReactNode;
+  scrollable?: boolean;
 }) => {
-  const { content, config, title, popoverTitle, draggable = true, optionExtra } = props;
+  const { content, config, title, popoverTitle, draggable = true, optionExtra, scrollable } = props;
   const [visible, setVisible] = useState(false);
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
     id: config.dataIndex,
@@ -182,6 +183,7 @@ const OptionItem = (props: {
       setVisible={(vis) => {
         setVisible(vis);
       }}
+      scrollable={scrollable}
     >
       {optionRow}
     </SimplePopover>
@@ -204,6 +206,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
   optionToolbar?: React.ReactNode;
   headerItem?: React.ReactNode;
   itemExtra?: (comp: T) => React.ReactNode;
+  scrollable?: boolean;
 }) {
   const { items, uniqVal, headerItem, optionToolbar, itemExtra } = props;
   const itemsDistinctValCount = uniqVal
@@ -286,6 +289,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
                     title={props.itemTitle(item)}
                     config={{ dataIndex: dataIndex }}
                     optionExtra={optionExtra}
+                    scrollable={props.scrollable}
                   />
                 );
               })}
diff --git a/client/packages/lowcoder-design/src/components/popover.tsx b/client/packages/lowcoder-design/src/components/popover.tsx
@@ -51,13 +51,15 @@ const SimplePopover = (props: {
   setVisible?: (vis: boolean) => void;
   children: JSX.Element | React.ReactNode;
   content: JSX.Element | React.ReactNode;
+  scrollable?: boolean;
 }) => {
   const { visible, setVisible } = props;
   const contentWithBox = (
     <SuspensionBox
       title={props.title}
       onClose={() => setVisible?.(false)}
       content={props.content}
+      scrollable={props.scrollable}
     />
   );
   return (
@@ -66,7 +68,7 @@ const SimplePopover = (props: {
       align={{
         offset: [-12, 0, 0, 0],
       }}
-      destroyTooltipOnHide
+      // destroyTooltipOnHide
       content={contentWithBox}
       trigger="click"
       open={visible}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -390,6 +390,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
           comp.children.columns.dispatch(action);
         }}
         dataIndex={(column) => column.getView().dataIndex}
+        scrollable={true}
       />
     </>
   );
