css - 当用户单击输入时防止菜单关闭

Question

有没有办法让它<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;

Answer 1

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

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