Предотвратить закрытие меню, когда пользователь нажимает ввод

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>