Chakra UI中Select组件选项弹窗打开后立即关闭问题求助

问题成因 #

Chakra UI的Menu组件默认逻辑是：点击MenuList内部的可点击元素（比如MenuItem）时，会触发外层菜单的关闭。当你在MenuItem里嵌套Select组件时，点击Select的操作会触发事件冒泡，被Menu的关闭监听器捕获，导致MenuList直接关闭，Select的下拉弹窗自然也跟着消失了。

解决方案 #

方法1：阻止事件冒泡 #

给包裹Select的MenuItem添加点击事件，阻止事件向上冒泡，这样Menu就不会因为点击Select而触发关闭：

<MenuItem
  p="0"
  _hover={{
    backgroundColor: theme.colors.whiteAlpha[300],
  }}
  onClick={(e) => e.stopPropagation()}
>
  {/* 原有内部Flex、Box、Select代码保持不变 */}
</MenuItem>

方法2：将Select移出MenuItem（业务允许的话） #

如果Select所在区域不需要具备MenuItem的点击交互，可以直接把Select放在MenuList里，不再嵌套到MenuItem中，这样就不会触发MenuItem的关闭逻辑：

<MenuList
  bg="#17243a"
  border="none"
  height="265px"
>
  <Flex position="absolute" w="100%" p="0.25rem">
    <Box
      w="27.6px"
      bgColor="black"
      borderLeftRadius="md"
      alignItems="center"
      justifyContent="center"
      display="flex"
    >
      <Text color="#f5bd42">{1}</Text>
    </Box>
    <Box w="calc(100% - 27.6px)" borderRightRadius="md" bgColor="#f5bd42" display="flex" alignItems="center">
      <Select size="xs">
        {plans?.Data?.slice(0, 8).map((plan, index) => (
          <option key={index}>{plan.Name}</option>
        ))}
      </Select>
    </Box>
  </Flex>
</MenuList>

方法3：关闭Menu的自动关闭逻辑（按需使用） #

给Menu组件设置closeOnSelect={false}，这样点击MenuItem时不会自动关闭Menu，但要注意这个设置会作用于所有MenuItem，如果需要其他MenuItem点击时关闭，得手动处理关闭逻辑：

<Menu closeOnSelect={false}>
  {/* 原有MenuButton和MenuList代码保持不变 */}
</Menu>

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