Merge pull request #13 from ozovalihasan/fix-middle-click

Fix the middle button used to select the table name
ozovalihasan · Apr 17, 2023 · 2fe6632 · 2fe6632
2 parents daf3a38 + f12fa1c
commit 2fe6632
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/documents/how-to-use.md b/documents/how-to-use.md
@@ -527,7 +527,7 @@ An entity can be added by dragging and dropping a table.
 
 ## How to change the related table of an entity?
 
-When the table name of an entity is clicked by the middle mouse button, a dropdown list will be opened. The related table can be changed by selecting any of the table names.
+When the table name of an entity is clicked by the right mouse button, a dropdown list will be opened. The related table can be changed by selecting any of the table names.
 
 ![change table name of entity EAD](./images/change-table-name-of-entity-ead.gif)
 

diff --git a/documents/images/change-table-name-of-entity-ead.gif b/documents/images/change-table-name-of-entity-ead.gif
diff --git a/src/components/TableName/TableName.tsx b/src/components/TableName/TableName.tsx
@@ -13,10 +13,10 @@ export const TableName =memo( ({ nodeId, tableId }: {nodeId: string, tableId: st
   const options = Object.entries(tables).map(([id, table]) => {return {id: id, name: table.name}});
 
   const handleMouseUp = (event: React.MouseEvent<HTMLDivElement> ) => {
-    if (event.button === 1){
-      handleMouseUpForSelect(selectEl)
-      selectEl.current!.focus()
-    }
+    event.preventDefault()
+
+    handleMouseUpForSelect(selectEl);
+    selectEl.current!.focus();
   }
 
   const handleMouseLeave = () => {
@@ -35,11 +35,11 @@ export const TableName =memo( ({ nodeId, tableId }: {nodeId: string, tableId: st
 
   return (
     <div 
-      className='text-xs flex relative'
+      className='text-xs flex relative nopan'
       onMouseLeave={handleMouseLeave} 
-      title="Middle button click to change the table"
+      title="Right button click to change the table"
     >
-      <div onMouseUp={event => handleMouseUp(event)} className="font-bold custom-select-button p-1 rounded-md">
+      <div onContextMenu={event => handleMouseUp(event)} className="font-bold custom-select-button p-1 rounded-md">
         {tableName}
       </div>
       <select

diff --git a/src/components/TableName/test/TableName.test.tsx b/src/components/TableName/test/TableName.test.tsx
@@ -30,7 +30,7 @@ describe('<TableName />', () => {
       render(renderReadyComponent);
 
       const buttonEl = screen.getAllByText(/Mock Name/i)[0]
-      fireEvent.mouseUp(buttonEl, {button: 1})
+      fireEvent.contextMenu(buttonEl)
 
     });
 

diff --git a/src/components/TableName/test/__snapshots__/TableName.test.tsx.snap b/src/components/TableName/test/__snapshots__/TableName.test.tsx.snap
@@ -6,8 +6,8 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="text-xs flex relative"
-        title="Middle button click to change the table"
+        class="text-xs flex relative nopan"
+        title="Right button click to change the table"
       >
         <div
           class="font-bold custom-select-button p-1 rounded-md"
@@ -36,8 +36,8 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="text-xs flex relative"
-      title="Middle button click to change the table"
+      class="text-xs flex relative nopan"
+      title="Right button click to change the table"
     >
       <div
         class="font-bold custom-select-button p-1 rounded-md"