单击标签输入下拉选项会导致我的菜单关闭

Question

我使用 Mantine 作为 UI 库，并且有一个可打开菜单的发送图标按钮。然后，此菜单包含一个 TagsInput 组件，我可以在其中选择多个电子邮件地址。

我现在遇到的问题是，当我在列表中选择一封电子邮件（例如[电子邮件受保护]）时，整个菜单都会关闭，如果我想选择更多电子邮件，我必须再次单击“通过电子邮件发送”按钮项目。

当我单击 TagsInput 中的选项时，如何保持菜单打开？

代码沙箱复制

处理此操作的组件：

import {
  ActionIcon,
  Button,
  Flex,
  FloatingPosition,
  Menu,
  Stack,
  TagsInput,
  Title,
  Tooltip,
} from '@mantine/core';
import { IconSend } from '@tabler/icons-react';
import { useState } from 'react';


function EmailActionButton({ withText = true, position = 'bottom-end' }: EmailActionButtonProps) {
  const [emails, setEmails] = useState<string[]>([]);

  const options = ['[email protected]', '[email protected]', '[email protected]'];

  return (
    <Menu width={'min(350px, 100%)'}  position={position}>
      <Menu.Target>
        {withText ? (
          <Button
            leftSection={<IconSend size="1rem" />}
            size="sm"
            variant="light"
          >
            Send via email
          </Button>
        ) : (
          <Tooltip label="Send via email" withArrow>
            <ActionIcon color="gray" variant="light">
              <IconSend size="1rem" />
            </ActionIcon>
          </Tooltip>
        )}
      </Menu.Target>
      <Menu.Dropdown>
        <Stack style={{ position: 'relative' }} p="md" gap="sm">
          <Flex justify="space-between" align="center">
            <Title order={5}>Send via email</Title>
          </Flex>

          <TagsInput placeholder="Select emails" data={options} value={emails} onChange={setEmails} />

          <Button leftSection={<IconSend size="1rem" />} fullWidth>
            Send
          </Button>
        </Stack>
      </Menu.Dropdown>
    </Menu>
  );
}

interface EmailActionButtonProps {
  withText?: boolean;
  position?: FloatingPosition;
}

export default EmailActionButton;

Answer 1

在 mantine 菜单上您有一个选项：

<Menu closeOnItemClick={false} > ... </Menu>

菜单文档中没有写，但我不记得了

---

但你似乎想做的是多选:)