fix: Fixed issue where note context menu would not open if right-clicking multiple times

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -43,12 +43,10 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
   const hasFiles = application.items.itemsReferencingItem(item).filter(isFile).length > 0
 
   const openNoteContextMenu = (posX: number, posY: number) => {
-    notesController.setContextMenuOpen(false)
     notesController.setContextMenuClickLocation({
       x: posX,
       y: posY,
     })
-    notesController.reloadContextMenuLayout()
     notesController.setContextMenuOpen(true)
   }
 

packages/web/src/javascripts/Controllers/NotesController/NotesController.ts

@@ -8,7 +8,6 @@ import {
   STAR_NOTE_COMMAND,
 } from '@standardnotes/ui-services'
 import { StringEmptyTrash, Strings, StringUtils } from '@/Constants/Strings'
-import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants/Constants'
 import {
   SNNote,
   NoteMutator,
@@ -44,10 +43,6 @@ export class NotesController
   shouldLinkToParentFolders: boolean
   lastSelectedNote: SNNote | undefined
   contextMenuOpen = false
-  contextMenuPosition: { top?: number; left: number; bottom?: number } = {
-    top: 0,
-    left: 0,
-  }
   contextMenuClickLocation: { x: number; y: number } = { x: 0, y: 0 }
   contextMenuMaxHeight: number | 'auto' = 'auto'
   showProtectedWarning = false
@@ -71,7 +66,6 @@ export class NotesController
 
     makeObservable(this, {
       contextMenuOpen: observable,
-      contextMenuPosition: observable,
       showProtectedWarning: observable,
 
       selectedNotes: computed,
@@ -81,8 +75,6 @@ export class NotesController
 
       setContextMenuOpen: action,
       setContextMenuClickLocation: action,
-      setContextMenuPosition: action,
-      setContextMenuMaxHeight: action,
       setShowProtectedWarning: action,
       unselectNotes: action,
     })
@@ -175,61 +167,6 @@ export class NotesController
     this.contextMenuClickLocation = location
   }
 
-  setContextMenuPosition(position: { top?: number; left: number; bottom?: number }): void {
-    this.contextMenuPosition = position
-  }
-
-  setContextMenuMaxHeight(maxHeight: number | 'auto'): void {
-    this.contextMenuMaxHeight = maxHeight
-  }
-
-  reloadContextMenuLayout(): void {
-    const { clientHeight } = document.documentElement
-    const defaultFontSize = window.getComputedStyle(document.documentElement).fontSize
-    const maxContextMenuHeight = parseFloat(defaultFontSize) * 30
-    const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
-    const footerHeightInPx = footerElementRect?.height
-
-    // Open up-bottom is default behavior
-    let openUpBottom = true
-
-    if (footerHeightInPx) {
-      const bottomSpace = clientHeight - footerHeightInPx - this.contextMenuClickLocation.y
-      const upSpace = this.contextMenuClickLocation.y
-
-      // If not enough space to open up-bottom
-      if (maxContextMenuHeight > bottomSpace) {
-        // If there's enough space, open bottom-up
-        if (upSpace > maxContextMenuHeight) {
-          openUpBottom = false
-          this.setContextMenuMaxHeight('auto')
-          // Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space
-        } else {
-          if (upSpace > bottomSpace) {
-            this.setContextMenuMaxHeight(upSpace - MENU_MARGIN_FROM_APP_BORDER)
-            openUpBottom = false
-          } else {
-            this.setContextMenuMaxHeight(bottomSpace - MENU_MARGIN_FROM_APP_BORDER)
-          }
-        }
-      } else {
-        this.setContextMenuMaxHeight('auto')
-      }
-    }
-
-    if (openUpBottom) {
-      this.setContextMenuPosition({
-        top: this.contextMenuClickLocation.y,
-        left: this.contextMenuClickLocation.x,
-      })
-    } else {
-      this.setContextMenuPosition({
-        bottom: clientHeight - this.contextMenuClickLocation.y,
-        left: this.contextMenuClickLocation.x,
-      })
-    }
-  }
-
   async changeSelectedNotes(mutate: (mutator: NoteMutator) => void): Promise<void> {
     await this.mutator.changeItems(this.getSelectedNotesList(), mutate, MutationType.NoUpdateUserTimestamps)
     this.sync.sync().catch(console.error)

packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts

@@ -62,6 +62,8 @@ export const useLifecycleAnimation = (
       return
     }
 
+    let animation: Animation | undefined
+
     if (open) {
       if (!enter) {
         setIsMounted(true)
@@ -71,7 +73,7 @@ export const useLifecycleAnimation = (
       if (enter.initialStyle) {
         Object.assign(element.style, enter.initialStyle)
       }
-      const animation = element.animate(
+      animation = element.animate(
         prefersReducedMotion && enter.reducedMotionKeyframes ? enter.reducedMotionKeyframes : enter.keyframes,
         {
           ...enter.options,
@@ -82,7 +84,12 @@ export const useLifecycleAnimation = (
         .then(() => {
           enterCallback?.(element)
         })
-        .catch(console.error)
+        .catch((error) => {
+          if (animation?.currentTime === null) {
+            return
+          }
+          console.error(error)
+        })
     } else {
       if (!exit) {
         setIsMounted(false)
@@ -92,7 +99,7 @@ export const useLifecycleAnimation = (
       if (exit.initialStyle) {
         Object.assign(element.style, exit.initialStyle)
       }
-      const animation = element.animate(
+      animation = element.animate(
         prefersReducedMotion && exit.reducedMotionKeyframes ? exit.reducedMotionKeyframes : exit.keyframes,
         {
           ...exit.options,
@@ -104,7 +111,16 @@ export const useLifecycleAnimation = (
           setIsMounted(false)
           exitCallback?.(element)
         })
-        .catch(console.error)
+        .catch((error) => {
+          if (animation?.currentTime === null) {
+            return
+          }
+          console.error(error)
+        })
+    }
+
+    return () => {
+      animation?.cancel()
     }
   }, [open, element, enterRef, enterCallbackRef, exitRef, exitCallbackRef, disabled])