refactor: menu component props and toolbar menu item colors [skip e2e]

2023-10-25 20:29:08 +05:30
parent cbc93fea13
commit 9e784d0c1c
31 changed files with 34 additions and 54 deletions
--- a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
@@ -140,7 +140,6 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
        </>
      )}
      <Menu
-        isOpen={application.accountMenuController.show}
        a11yLabel="General account menu"
        closeMenu={closeMenu}
        initialFocus={!application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX}
--- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
@@ -11,13 +11,11 @@ import MenuSection from '@/Components/Menu/MenuSection'

 type Props = {
  mainApplicationGroup: WebApplicationGroup
-  isOpen: boolean
  hideWorkspaceOptions?: boolean
 }

 const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
  mainApplicationGroup,
-  isOpen,
  hideWorkspaceOptions = false,
 }: Props) => {
  const application = useApplication()
@@ -71,7 +69,7 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
  }, [mainApplicationGroup])

  return (
-    <Menu a11yLabel="Workspace switcher menu" className="focus:shadow-none" isOpen={isOpen}>
+    <Menu a11yLabel="Workspace switcher menu" className="focus:shadow-none">
      <MenuSection>
        {applicationDescriptors.map((descriptor) => (
          <WorkspaceMenuItem
--- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
@@ -38,7 +38,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
        side="right"
        togglePopover={toggleMenu}
      >
-        <WorkspaceSwitcherMenu mainApplicationGroup={mainApplicationGroup} isOpen={isOpen} />
+        <WorkspaceSwitcherMenu mainApplicationGroup={mainApplicationGroup} />
      </Popover>
    </>
  )
--- a/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
+++ b/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
@@ -33,11 +33,7 @@ const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplication
        side="right"
        togglePopover={toggleMenu}
      >
-        <WorkspaceSwitcherMenu
-          mainApplicationGroup={mainApplicationGroup}
-          isOpen={isOpen}
-          hideWorkspaceOptions={true}
-        />
+        <WorkspaceSwitcherMenu mainApplicationGroup={mainApplicationGroup} hideWorkspaceOptions={true} />
      </Popover>
    </div>
  )
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
@@ -83,7 +83,6 @@ const ChangeEditorButton: FunctionComponent<Props> = ({ noteViewController, onCl
      >
        <ChangeEditorMenu
          application={application}
-          isVisible={isOpen}
          note={note}
          setDisableClickOutside={setIsClickOutsideDisabled}
          closeMenu={() => {
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -29,7 +29,6 @@ import MenuSection from '../Menu/MenuSection'
 type ChangeEditorMenuProps = {
  application: WebApplication
  closeMenu: () => void
-  isVisible: boolean
  note: SNNote | undefined
  onSelect?: (component: UIFeature<EditorFeatureDescription | IframeComponentFeatureDescription>) => void
  setDisableClickOutside?: (value: boolean) => void
@@ -40,7 +39,6 @@ const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace
 const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
  application,
  closeMenu,
-  isVisible,
  note,
  onSelect,
  setDisableClickOutside,
@@ -208,7 +206,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({

  return (
    <>
-      <Menu className="pb-1 pt-0.5" a11yLabel="Change note type menu" isOpen={isVisible}>
+      <Menu className="pb-1 pt-0.5" a11yLabel="Change note type menu">
        {groups
          .filter((group) => group.items && group.items.length)
          .map((group) => {
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx
@@ -132,7 +132,7 @@ const ChangeEditorMultipleMenu = ({ application, notes, setDisableClickOutside }

  return (
    <>
-      <Menu isOpen={true} a11yLabel="Change note type">
+      <Menu a11yLabel="Change note type">
        {groupsWithItems.map((group) => (
          <MenuSection key={getGroupId(group)}>
            {group.items.map((item) => {
--- a/packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx
+++ b/packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx
@@ -328,7 +328,7 @@ const ClipperView = ({ applicationGroup }: { applicationGroup: WebApplicationGro
        />
      </div>
    ) : (
-      <Menu a11yLabel="User account menu" isOpen={true}>
+      <Menu a11yLabel="User account menu">
        <MenuItem onClick={activateRegisterPane}>
          <Icon type="user" className="mr-2 h-6 w-6 text-neutral md:h-5 md:w-5" />
          Create free account
@@ -343,7 +343,7 @@ const ClipperView = ({ applicationGroup }: { applicationGroup: WebApplicationGro

  return (
    <div className="bg-contrast p-3">
-      <Menu a11yLabel="Extension menu" isOpen={true} className="rounded border border-border bg-default">
+      <Menu a11yLabel="Extension menu" className="rounded border border-border bg-default">
        {hasSelection && (
          <MenuItem
            className="border-b border-border"
@@ -449,7 +449,7 @@ const ClipperView = ({ applicationGroup }: { applicationGroup: WebApplicationGro
          <div className={classNames('flex items-center border-t border-border', hasSyncError && 'text-danger')}>
            {isSyncing && (
              <>
-                <Spinner className="w-4 h-4 mx-2.5" />
+                <Spinner className="mx-2.5 h-4 w-4" />
                <div className="flex-grow py-2 text-sm font-semibold text-info">Syncing...</div>
              </>
            )}
--- a/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
@@ -79,7 +79,7 @@ const AddItemMenuButton = ({
          align="center"
          className="py-2"
        >
-          <Menu a11yLabel={'test'} isOpen={isMenuOpen}>
+          <Menu a11yLabel={'test'}>
            <MenuItem
              onClick={() => {
                addNewItem()
--- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
@@ -125,7 +125,6 @@ const ContentListHeader = ({
            <DisplayOptionsMenu
              application={application}
              isFilesSmartView={isFilesSmartView}
-              isOpen={showDisplayOptionsMenu}
              selectedTag={selectedTag}
              paneController={paneController}
            />
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
@@ -82,7 +82,6 @@ const TabButton: FunctionComponent<{

 const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
  application,
-  isOpen,
  isFilesSmartView,
  selectedTag,
  paneController,
@@ -283,7 +282,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
  const shouldHideNonApplicableOptions = isTableViewEnabled && !isMobileScreen

  return (
-    <Menu className="text-sm" a11yLabel="Notes list options menu" isOpen={isOpen}>
+    <Menu className="text-sm" a11yLabel="Notes list options menu">
      <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Preferences for</div>
      <div className={classNames('mt-1.5 flex w-full justify-between px-3', !controlsDisabled && 'mb-3')}>
        <div className="flex items-center gap-1.5">
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenuProps.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenuProps.tsx
@@ -10,7 +10,6 @@ export type DisplayOptionsMenuPositionProps = {
 export type DisplayOptionsMenuProps = {
  application: WebApplication
  selectedTag: AnyTag
-  isOpen: boolean
  isFilesSmartView: boolean
  paneController: PaneController
 }
--- a/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx
+++ b/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx
@@ -75,7 +75,7 @@ const ContextMenuCell = ({ items }: { items: DecryptedItemInterface[] }) => {
        align="start"
        className="py-2"
      >
-        <Menu a11yLabel="File context menu" isOpen={contextMenuVisible}>
+        <Menu a11yLabel="File context menu">
          {allItemsAreFiles && (
            <FileMenuOptions
              closeMenu={() => {
@@ -366,7 +366,7 @@ const ContentTableView = ({ application, items }: Props) => {
          className="py-2"
        >
          {contextMenuItem instanceof FileItem && (
-            <Menu a11yLabel="File context menu" isOpen={true}>
+            <Menu a11yLabel="File context menu">
              <FileMenuOptions
                closeMenu={closeContextMenu}
                shouldShowRenameOption={false}
@@ -376,7 +376,7 @@ const ContentTableView = ({ application, items }: Props) => {
            </Menu>
          )}
          {contextMenuItem instanceof SNNote && (
-            <Menu className="select-none" a11yLabel="Note context menu" isOpen={true}>
+            <Menu className="select-none" a11yLabel="Note context menu">
              <NotesOptions notes={[contextMenuItem]} closeMenu={closeContextMenu} />
            </Menu>
          )}
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx
@@ -24,7 +24,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, i
      align="start"
      className="md:pb-2"
    >
-      <Menu a11yLabel="File context menu" isOpen={showFileContextMenu}>
+      <Menu a11yLabel="File context menu">
        <FileMenuOptions
          selectedFiles={selectedFiles}
          closeMenu={() => setShowFileContextMenu(false)}
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
@@ -26,7 +26,7 @@ const FilesOptionsPanel = ({ itemListController }: Props) => {
        open={isOpen}
        className="md:pb-2"
      >
-        <Menu a11yLabel="File options panel" isOpen={isOpen}>
+        <Menu a11yLabel="File options panel">
          <FileMenuOptions
            selectedFiles={itemListController.selectedFiles}
            closeMenu={() => {
--- a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -224,7 +224,7 @@ const FilePreviewModal = observer(({ application }: Props) => {
              className="md:pb-2"
              overrideZIndex="z-modal"
            >
-              <Menu a11yLabel="File context menu" isOpen={showOptionsMenu}>
+              <Menu a11yLabel="File context menu">
                <FileMenuOptions
                  selectedFiles={[currentFile]}
                  closeMenu={closeOptionsMenu}
--- a/packages/web/src/javascripts/Components/Menu/Menu.tsx
+++ b/packages/web/src/javascripts/Components/Menu/Menu.tsx
@@ -14,7 +14,6 @@ import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/u
 interface MenuProps extends ComponentPropsWithoutRef<'menu'> {
  a11yLabel: string
  closeMenu?: () => void
-  isOpen: boolean
  initialFocus?: number
  shouldAutoFocus?: boolean
 }
--- a/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
@@ -29,7 +29,7 @@ const NotesContextMenu = () => {
      open={contextMenuOpen}
      togglePopover={closeMenu}
    >
-      <Menu className="select-none" a11yLabel="Note context menu" isOpen={contextMenuOpen}>
+      <Menu className="select-none" a11yLabel="Note context menu">
        <NotesOptions
          notes={application.notesController.selectedNotes}
          requestDisableClickOutside={handleDisableClickOutsideRequest}
--- a/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -77,7 +77,7 @@ const AddTagOption: FunctionComponent<Props> = ({
        className="py-2"
        overrideZIndex="z-modal"
      >
-        <Menu a11yLabel="Tag selection menu" isOpen={isOpen} className="!px-0">
+        <Menu a11yLabel="Tag selection menu" className="!px-0">
          {navigationController.tags.map((tag) => (
            <MenuItem
              key={tag.uuid}
--- a/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -68,7 +68,6 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
        <ChangeEditorMenu
          application={application}
          note={note}
-          isVisible={isOpen}
          closeMenu={() => {
            setIsOpen(false)
          }}
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -367,7 +367,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
              }}
              className="md:py-1"
            >
-              <Menu a11yLabel={'Super note export menu'} isOpen={isSuperExportMenuOpen}>
+              <Menu a11yLabel={'Super note export menu'}>
                <MenuSection>
                  <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_JSON, notes[0].title)}>
                    <Icon type="code" className={iconClass} />
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -39,7 +39,7 @@ const NotesOptionsPanel = ({ notesController, onClickPreprocessing }: Props) =>
        open={isOpen}
        className="select-none"
      >
-        <Menu a11yLabel="Note options menu" isOpen={isOpen}>
+        <Menu a11yLabel="Note options menu">
          <NotesOptions
            notes={notesController.selectedNotes}
            requestDisableClickOutside={handleDisableClickOutsideRequest}
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -115,7 +115,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ closeMenu }) => {
  }, [deactivateAnyNonLayerableTheme])

  return (
-    <Menu a11yLabel="Quick settings menu" isOpen>
+    <Menu a11yLabel="Quick settings menu">
      {editorStackComponents.length > 0 && (
        <MenuSection title="Tools">
          {editorStackComponents.map((component) => (
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/TableCellActionMenuPlugin/index.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/TableCellActionMenuPlugin/index.tsx
@@ -390,7 +390,7 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, cellMerge }:
    (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN

  return (
-    <Menu className="dropdown !px-0" ref={dropDownRef} a11yLabel="Table actions menu" isOpen>
+    <Menu className="dropdown !px-0" ref={dropDownRef} a11yLabel="Table actions menu">
      {mergeCellButton}
      {!!mergeCellButton && <MenuItemSeparator />}
      <MenuItem onClick={() => insertTableRowAtSelection(false)}>
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
@@ -159,7 +159,7 @@ interface ToolbarMenuItemProps extends Omit<MenuItemProps, 'children'> {
 const ToolbarMenuItem = ({ name, iconName, active, ...props }: ToolbarMenuItemProps) => {
  return (
    <MenuItem
-      className={classNames('overflow-hidden md:py-2', active ? '!bg-info text-info-contrast' : 'hover:bg-contrast')}
+      className={classNames('overflow-hidden md:py-2', active ? '!bg-info !text-info-contrast' : 'hover:bg-contrast')}
      {...props}
    >
      <Icon type={iconName} className="-mt-px mr-2.5 flex-shrink-0" />
@@ -628,7 +628,7 @@ const ToolbarPlugin = () => {
            }

            return (
-              <Menu a11yLabel="Table of contents" isOpen className="!px-0">
+              <Menu a11yLabel="Table of contents" className="!px-0">
                {tableOfContents.map(([key, text, tag]) => {
                  const level = parseInt(tag.slice(1)) || 1
                  if (level > 3) {
@@ -674,12 +674,7 @@ const ToolbarPlugin = () => {
        disableFlip
        containerClassName="md:!min-w-60 md:!w-auto"
      >
-        <Menu
-          a11yLabel="Text formatting options"
-          isOpen
-          className="!px-0"
-          onClick={() => setIsTextFormatMenuOpen(false)}
-        >
+        <Menu a11yLabel="Text formatting options" className="!px-0" onClick={() => setIsTextFormatMenuOpen(false)}>
          <ToolbarMenuItem
            name="Highlight"
            iconName="draw"
@@ -718,7 +713,7 @@ const ToolbarPlugin = () => {
        disableFlip
        containerClassName="md:!min-w-60 md:!w-auto"
      >
-        <Menu a11yLabel="Text style" isOpen className="!px-0" onClick={() => setIsTextStyleMenuOpen(false)}>
+        <Menu a11yLabel="Text style" className="!px-0" onClick={() => setIsTextStyleMenuOpen(false)}>
          <ToolbarMenuItem
            name="Normal"
            iconName="paragraph"
@@ -789,7 +784,7 @@ const ToolbarPlugin = () => {
        disableFlip
        containerClassName="md:!min-w-60 md:!w-auto"
      >
-        <Menu a11yLabel="Alignment" isOpen className="!px-0" onClick={() => setIsAlignmentMenuOpen(false)}>
+        <Menu a11yLabel="Alignment" className="!px-0" onClick={() => setIsAlignmentMenuOpen(false)}>
          <ToolbarMenuItem
            name="Left align"
            iconName="align-left"
@@ -828,7 +823,7 @@ const ToolbarPlugin = () => {
        disableFlip
        containerClassName="md:!min-w-60 md:!w-auto"
      >
-        <Menu a11yLabel="Insert" isOpen className="!px-0" onClick={() => setIsInsertMenuOpen(false)}>
+        <Menu a11yLabel="Insert" className="!px-0" onClick={() => setIsInsertMenuOpen(false)}>
          <ToolbarMenuItem
            name="Table"
            iconName="table"
--- a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
@@ -71,7 +71,7 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
      togglePopover={() => navigationController.setContextMenuOpen(!contextMenuOpen)}
      className="py-2"
    >
-      <Menu a11yLabel="Tag context menu" isOpen={contextMenuOpen}>
+      <Menu a11yLabel="Tag context menu">
        <IconPicker
          key={'icon-picker'}
          onIconChange={handleIconChange}
--- a/packages/web/src/javascripts/Components/VaultSelectionMenu/ManyVaultSelectionMenu.tsx
+++ b/packages/web/src/javascripts/Components/VaultSelectionMenu/ManyVaultSelectionMenu.tsx
@@ -36,7 +36,7 @@ const ManyVaultSelectionMenu: FunctionComponent = () => {
  )

  return (
-    <Menu a11yLabel="Vault selection menu" isOpen>
+    <Menu a11yLabel="Vault selection menu">
      {!vaults.length && <div className="py-1 text-center">No vaults found</div>}
      {vaults.map((vault) => (
        <VaultSelectMenuItemWithOptions vault={vault} key={vault.uuid}>
--- a/packages/web/src/javascripts/Components/VaultSelectionMenu/SingleVaultSelectionMenu.tsx
+++ b/packages/web/src/javascripts/Components/VaultSelectionMenu/SingleVaultSelectionMenu.tsx
@@ -32,7 +32,7 @@ const SingleVaultSelectionMenu: FunctionComponent = () => {
  )

  return (
-    <Menu a11yLabel="Vault selection menu" isOpen>
+    <Menu a11yLabel="Vault selection menu">
      {!vaults.length && <div className="py-1 text-center">No vaults found</div>}
      {vaults.map((vault) => (
        <VaultSelectMenuItemWithOptions vault={vault} key={vault.uuid}>
--- a/packages/web/src/javascripts/Components/VaultSelectionMenu/VaultOptionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/VaultSelectionMenu/VaultOptionsMenu.tsx
@@ -24,7 +24,7 @@ const VaultOptionsMenu = ({ vault }: Props) => {

  return (
    <>
-      <Menu a11yLabel="Vault options menu" isOpen>
+      <Menu a11yLabel="Vault options menu">
        <MenuItem onClick={openEditModal}>
          <Icon type="pencil-filled" className="mr-2" />
          Edit vault
--- a/packages/web/src/javascripts/Components/VaultSelectionMenu/VaultSelectionMenu.tsx
+++ b/packages/web/src/javascripts/Components/VaultSelectionMenu/VaultSelectionMenu.tsx
@@ -28,7 +28,7 @@ const VaultSelectionMenu = () => {
  }

  return (
-    <Menu a11yLabel="Vault selection menu" isOpen>
+    <Menu a11yLabel="Vault selection menu">
      <RadioButtonGroup
        items={[
          { label: 'Multiple', value: 'many' },
--- a/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
+++ b/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
@@ -57,7 +57,7 @@ const VaultMenu = observer(({ items }: { items: DecryptedItemInterface[] }) => {
  const singleItemVault = items.length === 1 ? application.vaults.getItemVault(items[0]) : undefined

  return (
-    <Menu a11yLabel="Vault selection menu" isOpen={true}>
+    <Menu a11yLabel="Vault selection menu">
      {doSomeItemsBelongToVault && (
        <MenuItem
          onClick={() => {