chore: fix note options menu visibility in plain editor on mobile [skip e2e]

packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx

@@ -1,17 +1,19 @@
-import { useCallback, useRef, useState } from 'react'
+import { FocusEvent, useCallback, useRef, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import NotesOptions from './NotesOptions'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import Popover from '../Popover/Popover'
 import RoundIconButton from '../Button/RoundIconButton'
 import Menu from '../Menu/Menu'
+import { ElementIds } from '@/Constants/ElementIDs'
 
 type Props = {
   notesController: NotesController
   onClickPreprocessing?: () => Promise<void>
+  onButtonBlur?: (event: FocusEvent) => void
 }
 
-const NotesOptionsPanel = ({ notesController, onClickPreprocessing }: Props) => {
+const NotesOptionsPanel = ({ notesController, onClickPreprocessing, onButtonBlur }: Props) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
 
@@ -30,7 +32,14 @@ const NotesOptionsPanel = ({ notesController, onClickPreprocessing }: Props) =>
 
   return (
     <>
-      <RoundIconButton label="Note options menu" onClick={toggleMenu} ref={buttonRef} icon="more" />
+      <RoundIconButton
+        id={ElementIds.NoteOptionsButton}
+        label="Note options menu"
+        onClick={toggleMenu}
+        onBlur={onButtonBlur}
+        ref={buttonRef}
+        icon="more"
+      />
       <Popover
         title="Note options"
         disableClickOutside={disableClickOutside}