MenuItem 中的 TextField 导致 nextFocus.getAttribute 不是函数

Question

我创建了一个 Menu 和 Material UI，点击按钮时会弹出。此 Menu 显示一个动态的 id 列表，可以使用位于菜单顶部的 Textfield 进行过滤。但是当我在文本字段中输入时出现错误：Uncaught TypeError: nextFocus.getAttribute is not a function.
我不知道什么会导致这个问题以及如何解决它。

这是上图中显示的 SearchableFilter 组件的代码。我在代码中删除了一些不必要的样式

const SearchableFilter = ({ values, label, setState, state }) => {
  const classes = useStyles();
  const [focused, setFocused] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [searchValue, setSearchValue] = useState("");

  const openMenu = (event) => {
    setFocused(true);
    setAnchorEl(event.currentTarget);
  };

  const selectItem = (value) => {
    handleClose();
    setState(value);
  };

  const handleDelete = () => {
    setState("");
  };

  const handleChange = (event) => {
    return setSearchValue(event.target.value);
  };

  const filteredValues = values.filter((value) =>
    value.includes(searchValue.trim())
  );

  const handleClose = () => {
    setFocused(false);
    setAnchorEl(null);
  };

  return (
    <div className={classes.margin}>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={openMenu}
        disableRipple
        endIcon={<ArrowDropDownIcon color={state && "primary"} />}
      >
        {label}
      </Button>
      <Menu
        id="menu-appbar"
        anchorEl={anchorEl}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        open={Boolean(anchorEl)}
        elevation={2}
        onClose={handleClose}
      >
        <MenuItem
          button={false}
          dense={true}
          key="input"
          className={classes.menuItem}
        >
          <TextField
            id="input"
            label="Search"
            value={searchValue}
            onChange={handleChange}
          />
        </MenuItem>
        <List style={{ maxHeight: "300px", overflow: "auto" }}>
          {filteredValues.map((value) => (
            <MenuItem
              key={value}
              dense={true}
              className={classes.menuItem}
              disableGutters={true}
              onClick={() => selectItem(value)}
            >
              {value}
            </MenuItem>
          ))}
        </List>
      </Menu>
    </div>
  );
};

完整错误：

Uncaught TypeError: nextFocus.getAttribute is not a function
    at moveFocus (MenuList.js:76)
    at handleKeyDown (MenuList.js:188)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority (react-dom.development.js:11276)
    at discreteUpdates (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

编辑：

这是一个显示错误的 CodeSandBox：

Answer 1

@Ryan Cogswell 在评论中提供的答案。

将 onKeyDown 道具添加到 TextField 的父级 MenuItem 解决了我的问题。

<MenuItem
  button={false}
  onKeyDown={e => e.stopPropagation()}
>
  <TextField
    onChange={handleChange}
   value={value}
  />
</MenuItem>

Answer 2

正如 JonasLevin 的回答。

如果您有任何 div 或其他元素包装 Textfield ，您应该添加 onKeyDown={e => e.stopPropagation()} 那个元素

MenuItem 中的 TextField 导致 nextFocus.getAttribute 不是函数

TextField in MenuItem causes nextFocus.getAttribute is not a function

reactjs

material-ui

uitextfield

完整错误：

编辑：