防止菜单在用户单击输入时关闭

问题描述

有没有办法让 <Input /> 在点击时不关闭？目前，如果我在输入内部单击，菜单就会关闭。我的设置与原始海报相同。我试过玩弄 cloSEOnSelect="false" ，但似乎没有用。任何建议将不胜感激。

以下是 CodeSandBox 形式的示例： https://codesandbox.io/s/chakra-menuitem-as-input-forked-9ue4n

import {
  Box,Button,ChakraProvider,Input,Menu,MenuButton,MenuItem,MenuList,useMenuItem,} from '@chakra-ui/react';
import React from 'react';

const navigationKeys = ['ArrowUp','ArrowDown','Escape'];

const MenuInput = props => {
  const { role,...rest } = useMenuItem(props);
  return (
    <Box px="3" role={role}>
      <Input
        placeholder="Enter value"
        size="sm"
        {...rest}
        onKeyDown={e => {
          if (!navigationKeys.includes(e.key)) {
            e.stopPropagation();
          }
        }}
      />
    </Box>
  );
};

function App() {
  return (
    <ChakraProvider>
      <Menu>
        <MenuButton as={Button}>Button</MenuButton>
        <MenuList>
          <MenuInput />
          <MenuItem>Option 1</MenuItem>
          <MenuItem>Option 2</MenuItem>
        </MenuList>
      </Menu>
    </ChakraProvider>
  );
}

export default App;

解决方法

将 closeOnSelect={false} 添加到菜单组件以在单击 MenuInput 时停止关闭菜单。

<Menu closeOnSelect={false}>
        <MenuButton as={Button}>Button</MenuButton>
        <MenuList>
          <MenuInput />
          <MenuItem>Option 1</MenuItem>
          <MenuItem>Option 2</MenuItem>
        </MenuList>
      </Menu>