diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx index 5d875debe..3ca2968ee 100644 --- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx +++ b/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 { { - setPopoverOpen((prevValue) => !prevValue) - }} + open={true} disableMobileFullscreenTakeover={true} side={isMobileScreen() ? 'top' : 'bottom'} maxHeight={(mh) => mh / 2} diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx index 898cfcb98..3217a23e1 100644 --- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx +++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx @@ -31,8 +31,6 @@ export const ItemSelectionPlugin: FunctionComponent = ({ 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 = ({ currentNote }) = nodeToRemove.remove() } selectedOption.options.onSelect(matchingString) - setPopoverOpen(false) closeMenu() }) }, @@ -92,12 +89,6 @@ export const ItemSelectionPlugin: FunctionComponent = ({ 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 = ({ currentNote }) = { - setPopoverOpen((prevValue) => !prevValue) - }} + open={true} disableMobileFullscreenTakeover={true} side={isMobileScreen() ? 'top' : 'bottom'} maxHeight={(mh) => mh / 2} diff --git a/packages/web/src/javascripts/Components/Popover/Popover.tsx b/packages/web/src/javascripts/Components/Popover/Popover.tsx index 5508ca521..61e26ad3a 100644 --- a/packages/web/src/javascripts/Components/Popover/Popover.tsx +++ b/packages/web/src/javascripts/Components/Popover/Popover.tsx @@ -75,7 +75,7 @@ const Popover = ({ if (open) { removeListener = addAndroidBackHandler(() => { - togglePopover() + togglePopover?.() return true }) } diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx index a556bbfe1..f6abd927d 100644 --- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx +++ b/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() } diff --git a/packages/web/src/javascripts/Components/Popover/Types.ts b/packages/web/src/javascripts/Components/Popover/Types.ts index 6e1ecf2c8..994d78d8b 100644 --- a/packages/web/src/javascripts/Components/Popover/Types.ts +++ b/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 diff --git a/packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts b/packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts index f934fc1b4..63d393275 100644 --- a/packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts +++ b/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 disabled?: boolean } @@ -34,7 +34,7 @@ export const usePopoverCloseOnClickOutside = ({ if (!isDescendantOfMenu && !isAnchorElement && !isDescendantOfChildPopover && !isDescendantOfChallengeModal) { if (!disabled) { - togglePopover() + togglePopover?.() } } }