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

Question

I want to create a menu and make the menu items selectable. I am using Chakra UI's Menu and Select components. When I click on the Select, options open and then close immediately before I can select.

Does anyone have a solution for this or know what can cause this kind of problem?

Here is my code that contains MenuItem and Select component.

<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

I think your error is on the usage of MenuItem. It shouldn't actually work, because:

MenuItem: The trigger that handles menu selection. Must be a direct child of a MenuList.

Try changing MenuItem to Menu, and see if that solves your issue. But then think why you are using MenuItem, and if it is what you want to do, then follow the right hierarchy order described here: https://chakra-ui.com/docs/components/menu/usage

Answer 2

I found your issue, the problem is that when you click on the Select, the parent Components also think that you click them (event bubbling: https://javascript.info/bubbling-and-capturing ). What you have to do is to avoid this bubbling by adding the following on your Select component:

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

This will avoid that the event bubbles up to your parent components and avoids your select losing focus.