worked on issue #562

src/components/TableToolbar/ManageColumns.tsx

@@ -1,8 +1,20 @@
-import { useEffect, useRef, useMemo, useState } from "react";
+import {
+  useEffect,
+  useRef,
+  useMemo,
+  useState,
+  ChangeEvent,
+  forwardRef,
+} from "react";
 import { useAtom, useSetAtom } from "jotai";
 import { isEqual } from "lodash-es";
 import { colord } from "colord";
-import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+} from "react-beautiful-dnd";
 
 import { Box, AutocompleteProps, Theme } from "@mui/material";
 import VisibilityIcon from "@mui/icons-material/VisibilityOutlined";
@@ -26,7 +38,7 @@ import {
 } from "@src/atoms/tableScope";
 import { formatSubTableName } from "@src/utils/table";
 
-export default function ManageColumns2() {
+export default function ManageColumns() {
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   const [userSettings] = useAtom(userSettingsAtom, globalScope);
@@ -66,6 +78,9 @@ export default function ManageColumns2() {
     setOpen(false);
   };
 
+  // disable drag if search box is not empty
+  const [disableDrag, setDisableDrag] = useState<boolean>(false);
+
   const renderOption: AutocompleteProps<
     any,
     true,
@@ -77,7 +92,11 @@ export default function ManageColumns2() {
         .mix("#fff", theme.palette.mode === "dark" ? 0.16 : 0)
         .alpha(1);
     return (
-      <Draggable draggableId={option.value} index={option.index}>
+      <Draggable
+        draggableId={option.value}
+        index={option.index}
+        isDragDisabled={disableDrag}
+      >
         {(provided) => (
           <li {...props} ref={provided.innerRef} {...provided.draggableProps}>
             <Box
@@ -86,7 +105,7 @@ export default function ManageColumns2() {
             >
               <DragIndicatorOutlinedIcon
                 color="disabled"
-                sx={[{ marginRight: "6px" }]}
+                sx={[{ marginRight: "6px", opacity: disableDrag ? 0.6 : 1 }]}
               />
             </Box>
             <ColumnItem option={option}>
@@ -95,7 +114,12 @@ export default function ManageColumns2() {
                   { position: "relative", height: "1.5rem" },
                   selected
                     ? { color: "primary.main" }
-                    : { color: "primary.gray", opacity: 0.6 },
+                    : {
+                        opacity: 0,
+                        ".MuiAutocomplete-option.Mui-focused &": {
+                          opacity: 0.5,
+                        },
+                      },
                 ]}
               >
                 <VisibilityIcon />
@@ -129,7 +153,7 @@ export default function ManageColumns2() {
   };
 
   const updateColumn = useSetAtom(updateColumnAtom, tableScope);
-  function handleOnDragEnd(result: any) {
+  function handleOnDragEnd(result: DropResult) {
     if (!result.destination) return;
     updateColumn({
       key: result.draggableId,
@@ -138,6 +162,39 @@ export default function ManageColumns2() {
     });
   }
 
+  function checkToDisableDrag(e: ChangeEvent<HTMLInputElement>) {
+    setDisableDrag(e.target.value !== "");
+  }
+
+  const ListboxComponent = forwardRef(function ListboxComponent(
+    props: React.HTMLAttributes<HTMLElement>,
+    ulRef: any /*React.ForwardedRef<HTMLUListElement>*/
+  ) {
+    const { children, ...other } = props;
+
+    return (
+      <DragDropContext onDragEnd={handleOnDragEnd}>
+        <Droppable droppableId="columns_manager" direction="vertical">
+          {(provided) => (
+            <ul
+              {...other}
+              {...provided.droppableProps}
+              ref={(ref) => {
+                provided.innerRef(ref);
+                if (ulRef !== null) {
+                  ulRef(ref);
+                }
+              }}
+            >
+              {props.children}
+              {provided.placeholder}
+            </ul>
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+  });
+
   return (
     <>
       <ButtonWithStatus
@@ -148,53 +205,48 @@ export default function ManageColumns2() {
       >
         {"Columns"}
       </ButtonWithStatus>
-      <DragDropContext onDragEnd={handleOnDragEnd}>
-        <Droppable droppableId="columns_manager" direction="vertical">
-          {(provided) => (
-            <>
-              <ColumnSelect
-                TextFieldProps={{
-                  style: { display: "none" },
-                  SelectProps: {
-                    open,
-                    MenuProps: {
-                      anchorEl: buttonRef.current,
-                      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-                      transformOrigin: { vertical: "top", horizontal: "left" },
-                      sx: {
-                        "& .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected=true]":
-                          {
-                            backgroundColor: "transparent",
-                          },
-                      },
-                    },
+
+      <ColumnSelect
+        TextFieldProps={{
+          style: { display: "none" },
+          onInput: checkToDisableDrag,
+          SelectProps: {
+            open,
+            MenuProps: {
+              anchorEl: buttonRef.current,
+              anchorOrigin: { vertical: "bottom", horizontal: "left" },
+              transformOrigin: { vertical: "top", horizontal: "left" },
+              sx: {
+                "& .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected=true]":
+                  {
+                    backgroundColor: "transparent",
                   },
-                }}
-                {...{
-                  AutocompleteProps: {
-                    renderOption,
-                    ListboxProps: {
-                      ...provided.droppableProps,
-                      ref: provided.innerRef,
-                    },
-                  },
-                }}
-                label="Hidden fields"
-                labelPlural="fields"
-                value={hiddenFields ?? []}
-                onChange={setHiddenFields}
-                onClose={handleSave}
-                clearText="Show all"
-                selectAllText="Hide all"
-                doneText="Apply"
-              />
-              {/* <div style={{ display: 'none' }}>
-                {provided.placeholder}
-              </div> */}
-            </>
-          )}
-        </Droppable>
-      </DragDropContext>
+              },
+            },
+          },
+        }}
+        {...{
+          AutocompleteProps: {
+            renderOption,
+            ListboxComponent,
+            // ListboxProps: {
+            //   ...provided.droppableProps,
+            //   ref: provided.innerRef,
+            // },
+          },
+        }}
+        label="Hidden fields"
+        labelPlural="fields"
+        value={hiddenFields ?? []}
+        onChange={(updates: string[]) => {
+          setHiddenFields(updates);
+          setDisableDrag(false);
+        }}
+        onClose={handleSave}
+        clearText="Show all"
+        selectAllText="Hide all"
+        doneText="Apply"
+      />
     </>
   );
 }

src/components/TableToolbar/TableToolbar.tsx

@@ -14,7 +14,7 @@ import { ButtonSkeleton } from "./TableToolbarSkeleton";
 import AddRow from "./AddRow";
 import LoadedRowsStatus from "./LoadedRowsStatus";
 import TableSettings from "./TableSettings";
-import HiddenFields from "./HiddenFields";
+// import HiddenFields from "./HiddenFields";
 import ManageColumns from "./ManageColumns";
 import RowHeight from "./RowHeight";