Chakra UI Select 选项立即打开和关闭

Question

我想创建一个菜单并使菜单项可选择。 我正在使用 Chakra UI 的菜单和 Select 组件。 当我点击 Select 时，选项打开然后立即关闭，然后我可以 select。

有没有人对此有解决方案或知道什么会导致此类问题？

这是我的代码，其中包含 MenuItem 和 Select 组件。

<Menu>
  <MenuButton
    as={IconButton}
    icon={<DnDIcon color={theme.colors.yellow[500]} />}
    w="2rem"
    h="2rem"
    pos="absolute"
    bg="none"
  />
  <MenuList
    bg="#17243a"
    border="none"
    height="265px"
    // className="scrollbarStyle"
    // overflowY="scroll"
  >
    <Flex position="absolute">
      <MenuItem
        p="0"
        _hover={{
          backgroundColor: theme.colors.whiteAlpha[300],
        }}
      >
        <Flex direction="row" transform="none" w="100%" h="2rem" p="0.25rem">
          <Box
            w="27.6px"
            bgColor="black"
            borderLeftRadius="md"
            alignItems="center"
            justifyContent="center"
          >
            <Box>
              <Text color={"#f5bd42"}>{1}</Text>
            </Box>
          </Box>
          <Box w="calc(100% - 27.6px)" borderRightRadius="md" bgColor="#f5bd42">
            <Flex>
              <Select size="xs">
                {plans?.Data?.slice(0, 8).map((plan, index) => (
                  <option key={index}>{plan.Name}</option>
                ))}
              </Select>
            </Flex>
          </Box>
        </Flex>
      </MenuItem>
    </Flex>
  </MenuList>
</Menu>;

`

Answer 1

我认为您的错误在于 MenuItem 的使用。 它实际上不应该工作，因为：

MenuItem：处理菜单选择的触发器。 必须是 MenuList 的直接子项。

尝试将 MenuItem 更改为 Menu，看看是否能解决您的问题。 但是然后想想你为什么要使用 MenuItem，如果它是你想要做的，那么请遵循此处描述的正确层次结构顺序： https://chakra-ui.com/docs/components/menu/usage

Answer 2

我发现了你的问题，问题是当你点击Select时，父组件也认为你点击了它们（事件冒泡： https://javascript.info/bubbling-and-capturing ）。 您要做的是通过在 Select 组件上添加以下内容来避免这种冒泡：

<Select onClick={e => e.stopPropagation()} size="xs">
            {plans?.Data?.slice(0, 8).map((plan, index) => (
              <option key={index}>{plan.Name}</option>
            ))}
</Select>

这将避免事件冒泡到您的父组件并避免您的 select 失去焦点。