fix: autofocus on mobile

chartdb · Aug 27, 2024 · d5cb3e5 · d5cb3e5
1 parent 66db34d
commit d5cb3e5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/...st/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx b/...st/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/...bles-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx b/...bles-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>