Prevent token and note menu focus after transform

src/components/konva/Note.tsx

@@ -104,7 +104,7 @@ function Note({
   function handleClick(event: Konva.KonvaEventObject<MouseEvent>) {
     if (draggable) {
       const noteNode = event.target;
-      onNoteMenuOpen && onNoteMenuOpen(note.id, noteNode);
+      onNoteMenuOpen && onNoteMenuOpen(note.id, noteNode, true);
     }
   }
 
@@ -130,7 +130,7 @@ function Note({
       const delta = event.evt.timeStamp - notePointerDownTimeRef.current;
       if (delta < 300) {
         const noteNode = event.target;
-        onNoteMenuOpen?.(note.id, noteNode);
+        onNoteMenuOpen?.(note.id, noteNode, true);
       }
     }
   }
@@ -198,7 +198,7 @@ function Note({
           rotation: rotation,
         },
       });
-      onNoteMenuOpen?.(note.id, noteRef.current);
+      onNoteMenuOpen?.(note.id, noteRef.current, false);
       noteRef.current.scaleX(1);
       noteRef.current.scaleY(1);
     }

src/components/konva/Token.tsx

@@ -229,7 +229,7 @@ function Token({
 
   function handleClick() {
     if (selectable && draggable && tokenRef.current) {
-      onTokenMenuOpen(tokenState.id, tokenRef.current);
+      onTokenMenuOpen(tokenState.id, tokenRef.current, true);
     }
   }
 
@@ -255,7 +255,7 @@ function Token({
       // If down and up time is small trigger a click
       const delta = event.evt.timeStamp - tokenPointerDownTimeRef.current;
       if (delta < 300) {
-        onTokenMenuOpen(tokenState.id, tokenRef.current);
+        onTokenMenuOpen(tokenState.id, tokenRef.current, true);
       }
     }
   }
@@ -292,7 +292,7 @@ function Token({
       });
       tokenRef.current.scaleX(1);
       tokenRef.current.scaleY(1);
-      onTokenMenuOpen(tokenState.id, tokenRef.current);
+      onTokenMenuOpen(tokenState.id, tokenRef.current, false);
     }
     setIsTransforming(false);
   }

src/components/note/NoteMenu.tsx

@@ -31,6 +31,7 @@ type NoteMenuProps = {
   onRequestClose: RequestCloseEventHandler;
   note?: Note;
   noteNode?: Konva.Node;
+  focus: boolean;
   onNoteChange: NoteChangeEventHandler;
   map: Map | null;
 };
@@ -40,6 +41,7 @@ function NoteMenu({
   onRequestClose,
   note,
   noteNode,
+  focus,
   onNoteChange,
   map,
 }: NoteMenuProps) {
@@ -95,7 +97,7 @@ function NoteMenu({
       // Focus input
       const tokenLabelInput =
         node.querySelector<HTMLInputElement>("#changeNoteText");
-      if (tokenLabelInput) {
+      if (tokenLabelInput && focus) {
         tokenLabelInput.focus();
         tokenLabelInput.select();
       }
@@ -219,4 +221,8 @@ function NoteMenu({
   );
 }
 
+NoteMenu.defaultProps = {
+  focus: false,
+};
+
 export default NoteMenu;

src/components/token/TokenMenu.tsx

@@ -58,6 +58,7 @@ type TokenMenuProps = {
   onRequestClose: RequestCloseEventHandler;
   tokenState?: TokenState;
   tokenImage?: Konva.Node;
+  focus: boolean;
   onTokenStateChange: TokenStateChangeEventHandler;
   map: Map | null;
 };
@@ -67,6 +68,7 @@ function TokenMenu({
   onRequestClose,
   tokenState,
   tokenImage,
+  focus,
   onTokenStateChange,
   map,
 }: TokenMenuProps) {
@@ -143,7 +145,7 @@ function TokenMenu({
       // Focus input
       const tokenLabelInput =
         node.querySelector<HTMLInputElement>("#changeTokenLabel");
-      if (tokenLabelInput) {
+      if (tokenLabelInput && focus) {
         tokenLabelInput.focus();
         tokenLabelInput.select();
       }
@@ -276,4 +278,8 @@ function TokenMenu({
   );
 }
 
+TokenMenu.defaultProps = {
+  focus: false,
+};
+
 export default TokenMenu;

src/components/tools/NoteTool.tsx

@@ -117,7 +117,7 @@ function NoteTool({
     function handleBrushUp() {
       if (noteData && creatingNoteRef.current) {
         onNoteCreate([noteData]);
-        onNoteMenuOpen(noteData.id, creatingNoteRef.current);
+        onNoteMenuOpen(noteData.id, creatingNoteRef.current, true);
       }
       setNoteData(null);
       setIsBrushDown(false);

src/hooks/useMapNotes.tsx

@@ -41,8 +41,12 @@ function useMapNotes(
   const [noteDraggingOptions, setNoteDraggingOptions] =
     useState<NoteDraggingOptions>();
 
-  function handleNoteMenuOpen(noteId: string, noteNode: Konva.Node) {
-    setNoteMenuOptions({ noteId, noteNode });
+  function handleNoteMenuOpen(
+    noteId: string,
+    noteNode: Konva.Node,
+    focus: boolean
+  ) {
+    setNoteMenuOptions({ noteId, noteNode, focus });
     setIsNoteMenuOpen(true);
   }
 
@@ -135,6 +139,7 @@ function useMapNotes(
       onNoteChange={onNoteChange}
       note={noteMenuOptions && mapState?.notes[noteMenuOptions.noteId]}
       noteNode={noteMenuOptions?.noteNode}
+      focus={noteMenuOptions?.focus}
       map={map}
     />
   );

src/hooks/useMapTokens.tsx

@@ -49,8 +49,12 @@ function useMapTokens(
   const [tokenDraggingOptions, setTokenDraggingOptions] =
     useState<TokenDraggingOptions>();
 
-  function handleTokenMenuOpen(tokenStateId: string, tokenImage: Konva.Node) {
-    setTokenMenuOptions({ tokenStateId, tokenImage });
+  function handleTokenMenuOpen(
+    tokenStateId: string,
+    tokenImage: Konva.Node,
+    focus: boolean
+  ) {
+    setTokenMenuOptions({ tokenStateId, tokenImage, focus });
     setIsTokenMenuOpen(true);
   }
 
@@ -174,6 +178,7 @@ function useMapTokens(
       tokenState={
         tokenMenuOptions && mapState?.tokens[tokenMenuOptions.tokenStateId]
       }
+      focus={tokenMenuOptions?.focus}
       tokenImage={tokenMenuOptions?.tokenImage}
       map={map}
     />

src/types/Events.ts

@@ -28,7 +28,8 @@ export type TokenStateChangeEventHandler = (
 ) => void;
 export type TokenMenuOpenChangeEventHandler = (
   tokenStateId: string,
-  tokenImage: Konva.Node
+  tokenImage: Konva.Node,
+  focus: boolean
 ) => void;
 export type TokenMenuCloseChangeEventHandler = () => void;
 export type TokenSettingsChangeEventHandler = (change: Partial<Token>) => void;
@@ -45,7 +46,8 @@ export type NoteChangeEventHandler = (
 ) => void;
 export type NoteMenuOpenEventHandler = (
   noteId: string,
-  noteNode: Konva.Node
+  noteNode: Konva.Node,
+  focus: boolean
 ) => void;
 export type NoteMenuCloseEventHandler = () => void;
 export type NoteDragEventHandler = (

src/types/Note.ts

@@ -19,6 +19,7 @@ export type Note = {
 export type NoteMenuOptions = {
   noteId: string;
   noteNode: Konva.Node;
+  focus: boolean;
 };
 
 export type NoteDraggingOptions = {

src/types/Token.ts

@@ -34,6 +34,7 @@ export type Token = DefaultToken | FileToken;
 export type TokenMenuOptions = {
   tokenStateId: string;
   tokenImage: Konva.Node;
+  focus: boolean;
 };
 
 export type TokenDraggingOptions = {