Mantine框架中点击TagsInput下拉选项导致Menu关闭的解决方法

问题 #

使用Mantine UI库开发时，设置了一个发送按钮，点击后打开Menu组件，Menu内包含TagsInput用于多选邮箱地址。当前问题是：选择列表中的邮箱（如mark@google.com）时，Menu会自动关闭，需要重新点击按钮才能继续选择其他邮箱，希望实现点击TagsInput选项时保持Menu打开状态。

解决方案 #

Mantine的Menu组件默认会在点击Dropdown内元素时触发关闭，要解决这个问题，需要通过Menu的属性控制关闭逻辑，同时让TagsInput的选项跳过Menu的关闭触发：

关键修改点 #

1. 给Menu组件添加closeOnClick={false}，禁用点击Dropdown内元素时自动关闭Menu的默认行为
2. 自定义TagsInput的选项渲染，给每个选项添加data-menu-ignore属性（Mantine会识别该属性，忽略此元素的关闭触发）
3. 手动控制Menu关闭：点击"Send"按钮时调用Menu的关闭方法，同时保留点击Menu外部自动关闭的默认行为

修改后的完整代码 #

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

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

  const options = ['tijl@google.com', 'mark@google.com', 'Jos@google.com'];

  return (
    <Menu 
      width={'min(350px, 100%)'}  
      position={position}
      closeOnClick={false}
      ref={menuRef}
    >
      <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}
            itemComponent={({ item, ...props }) => (
              <div {...props} data-menu-ignore>
                {item}
              </div>
            )}
          />

          <Button 
            leftSection={<IconSend size="1rem" />} 
            fullWidth
            onClick={() => menuRef.current?.close()}
          >
            Send
          </Button>
        </Stack>
      </Menu.Dropdown>
    </Menu>
  );
}

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

export default EmailActionButton;

代码说明 #

• closeOnClick={false}：取消Menu默认的点击内部元素关闭逻辑
• itemComponent：自定义TagsInput选项的渲染结构，通过data-menu-ignore标记选项，避免触发Menu关闭
• menuRef：通过Ref获取Menu实例，点击Send按钮时手动调用close()完成Menu关闭，保证流程完整性

内容的提问来源于stack exchange，提问作者Tijl Declerck