🐛 close dropdown when adding a column

Author: anaisberg

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock/AddColumnButton.tsx

@@ -5,15 +5,12 @@ import { Box, DropButton, Text } from '@/components';
 
 export const AddButtonComponent = ({
   addColumn,
-  isOpen,
-  setIsOpen,
 }: {
   addColumn: (columnName: string) => void;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
 }) => {
-  const onOpenChange = (isOpen: boolean) => {
-    setIsOpen(isOpen);
+  const [isOpen, setIsOpen] = useState(false);
+  const onOpenChange = (open: boolean) => {
+    setIsOpen(open);
   };
   const [columnName, setColumnName] = useState('');
 
@@ -45,6 +42,7 @@ export const AddButtonComponent = ({
               return;
             }
             addColumn(columnName);
+            setIsOpen(false);
           }}
           style={{ alignSelf: 'end', width: 'fit-content' }}
         >

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock/DatabaseGrid.tsx

@@ -8,7 +8,6 @@ import { AddButtonComponent } from './AddColumnButton';
 
 export const DatabaseGrid = () => {
   const gridRef = useRef(null);
-  const [addColumnToggleOpen, setAddColumnToggleOpen] = useState(false);
 
   const [rowData, setRowData] = useState([
     { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
@@ -29,8 +28,6 @@ export const DatabaseGrid = () => {
         innerHeaderComponent: () =>
           AddButtonComponent({
             addColumn,
-            isOpen: addColumnToggleOpen,
-            setIsOpen: setAddColumnToggleOpen,
           }),
       },
       unSortIcon: false,
@@ -62,7 +59,6 @@ export const DatabaseGrid = () => {
         ...(addColumn !== undefined ? [addColumn] : []),
       ];
     });
-    setAddColumnToggleOpen(false);
   };
 
   return (