From d5cb3e5648203a1552d76818e73c7382b6234f3d Mon Sep 17 00:00:00 2001
From: Guy Moses <guy@lumigo.io>
Date: Tue, 27 Aug 2024 14:37:01 +0300
Subject: [PATCH] fix: autofocus on mobile

---
 .../relationship-list-item-header.tsx                  | 10 +++++++++-
 .../table-list-item-header/table-list-item-header.tsx  | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx b/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx
index 3d030c2bd..bd07d16b1 100644
--- a/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx
+++ b/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx
@@ -21,6 +21,8 @@ import {
     DropdownMenuTrigger,
 } from '@/components/dropdown-menu/dropdown-menu';
 import { Input } from '@/components/input/input';
+import { useLayout } from '@/hooks/use-layout';
+import { useBreakpoint } from '@/hooks/use-breakpoint';
 
 export interface RelationshipListItemHeaderProps {
     relationship: DBRelationship;
@@ -31,7 +33,9 @@ export const RelationshipListItemHeader: React.FC<
 > = ({ relationship }) => {
     const { updateRelationship, removeRelationship } = useChartDB();
     const { fitView, deleteElements, setEdges } = useReactFlow();
+    const { hideSidePanel } = useLayout();
     const [editMode, setEditMode] = React.useState(false);
+    const { isMd: isDesktop } = useBreakpoint('md');
     const [relationshipName, setRelationshipName] = React.useState(
         relationship.name
     );
@@ -89,6 +93,10 @@ export const RelationshipListItemHeader: React.FC<
                     },
                 ],
             });
+
+            if (!isDesktop) {
+                hideSidePanel();
+            }
         },
         [
             fitView,
@@ -154,7 +162,7 @@ export const RelationshipListItemHeader: React.FC<
                 {!editMode ? (
                     <>
                         <div>{renderDropDownMenu()}</div>
-                        <div className="hidden group-hover:flex flex-row-reverse">
+                        <div className="flex md:hidden md:group-hover:flex flex-row-reverse">
                             <ListItemHeaderButton onClick={enterEditMode}>
                                 <Pencil />
                             </ListItemHeaderButton>
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
index ae6d80119..a5a6d3323 100644
--- a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx
@@ -23,6 +23,8 @@ import {
     DropdownMenuTrigger,
 } from '@/components/dropdown-menu/dropdown-menu';
 import { useReactFlow } from '@xyflow/react';
+import { useLayout } from '@/hooks/use-layout';
+import { useBreakpoint } from '@/hooks/use-breakpoint';
 
 export interface TableListItemHeaderProps {
     table: DBTable;
@@ -33,8 +35,10 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
 }) => {
     const { updateTable, removeTable, createIndex, createField } = useChartDB();
     const { fitView, setNodes } = useReactFlow();
+    const { hideSidePanel } = useLayout();
     const [editMode, setEditMode] = React.useState(false);
     const [tableName, setTableName] = React.useState(table.name);
+    const { isMd: isDesktop } = useBreakpoint('md');
     const inputRef = React.useRef<HTMLInputElement>(null);
 
     const editTableName = useCallback(() => {
@@ -82,6 +86,10 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
                     },
                 ],
             });
+
+            if (!isDesktop) {
+                hideSidePanel();
+            }
         },
         [fitView, table.id, setNodes]
     );
@@ -161,7 +169,7 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
                 {!editMode ? (
                     <>
                         <div>{renderDropDownMenu()}</div>
-                        <div className="hidden group-hover:flex flex-row-reverse">
+                        <div className="flex md:hidden md:group-hover:flex flex-row-reverse">
                             <ListItemHeaderButton onClick={enterEditMode}>
                                 <Pencil />
                             </ListItemHeaderButton>