fix: Fixed issue where Super note would convert whole line into tag even after closing menu

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx

@@ -36,8 +36,6 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
     minLength: 0,
   })
 
-  const [popoverOpen, setPopoverOpen] = useState(true)
-
   const options = useMemo(() => {
     const indentOutdentOptions = application.isNativeMobileWeb() ? GetIndentOutdentBlocks(editor) : []
 
@@ -90,7 +88,6 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
           nodeToRemove.remove()
         }
         selectedOption.onSelect(matchingString)
-        setPopoverOpen(false)
         closeMenu()
       })
     },
@@ -105,12 +102,6 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
         onSelectOption={onSelectOption}
         triggerFn={checkForTriggerMatch}
         options={options}
-        onClose={() => {
-          setPopoverOpen(false)
-        }}
-        onOpen={() => {
-          setPopoverOpen(true)
-        }}
         menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
           if (!anchorElementRef.current || !options.length) {
             return null
@@ -120,10 +111,7 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
             <Popover
               align="start"
               anchorElement={anchorElementRef.current}
-              open={popoverOpen}
-              togglePopover={() => {
-                setPopoverOpen((prevValue) => !prevValue)
-              }}
+              open={true}
               disableMobileFullscreenTakeover={true}
               side={isMobileScreen() ? 'top' : 'bottom'}
               maxHeight={(mh) => mh / 2}

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx

@@ -31,8 +31,6 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
     minLength: 0,
   })
 
-  const [popoverOpen, setPopoverOpen] = useState(true)
-
   const onSelectOption = useCallback(
     (selectedOption: ItemOption, nodeToRemove: TextNode | null, closeMenu: () => void, matchingString: string) => {
       editor.update(() => {
@@ -40,7 +38,6 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
           nodeToRemove.remove()
         }
         selectedOption.options.onSelect(matchingString)
-        setPopoverOpen(false)
         closeMenu()
       })
     },
@@ -92,12 +89,6 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
       onSelectOption={onSelectOption}
       triggerFn={checkForTriggerMatch}
       options={options}
-      onClose={() => {
-        setPopoverOpen(false)
-      }}
-      onOpen={() => {
-        setPopoverOpen(true)
-      }}
       menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
         if (!anchorElementRef.current || !options.length) {
           return null
@@ -107,10 +98,7 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
           <Popover
             align="start"
             anchorElement={anchorElementRef.current}
-            open={popoverOpen}
-            togglePopover={() => {
-              setPopoverOpen((prevValue) => !prevValue)
-            }}
+            open={true}
             disableMobileFullscreenTakeover={true}
             side={isMobileScreen() ? 'top' : 'bottom'}
             maxHeight={(mh) => mh / 2}

packages/web/src/javascripts/Components/Popover/Popover.tsx

@@ -75,7 +75,7 @@ const Popover = ({
 
     if (open) {
       removeListener = addAndroidBackHandler(() => {
-        togglePopover()
+        togglePopover?.()
         return true
       })
     }

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -90,7 +90,7 @@ const PositionedPopoverContent = ({
         onKeyDown={(event) => {
           if (event.key === 'Escape') {
             event.stopPropagation()
-            togglePopover()
+            togglePopover?.()
             if (anchorElement) {
               anchorElement.focus()
             }

packages/web/src/javascripts/Components/Popover/Types.ts

@@ -35,7 +35,7 @@ type CommonPopoverProps = {
   children: ReactNode
   side?: PopoverSide
   overrideZIndex?: string
-  togglePopover: () => void
+  togglePopover?: () => void
   className?: string
   disableClickOutside?: boolean
   disableMobileFullscreenTakeover?: boolean

packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts

@@ -4,7 +4,7 @@ import { useEffect } from 'react'
 type Options = {
   popoverElement: HTMLElement | null
   anchorElement: HTMLElement | null | undefined
-  togglePopover: () => void
+  togglePopover?: () => void
   childPopovers: Set<string>
   disabled?: boolean
 }
@@ -34,7 +34,7 @@ export const usePopoverCloseOnClickOutside = ({
 
       if (!isDescendantOfMenu && !isAnchorElement && !isDescendantOfChildPopover && !isDescendantOfChallengeModal) {
         if (!disabled) {
-          togglePopover()
+          togglePopover?.()
         }
       }
     }