javascript - 输入错误 : cannot type 'S' into search input

Question

我差点放弃这个错误。我只是无法在搜索输入中输入“S”。

键盘工作正常。

下面的沙盒。

https://codesandbox.io/s/jolly-raman-61zbx?file=/src/App.js

来自沙箱的代码:

import {
  Box,
  FormControl,
  InputAdornment,
  ListItem,
  Menu,
  TextField,
  withStyles
} from "@material-ui/core";
import {
  clamp,
  difference,
  includes,
  intersection,
  join,
  map,
  union
} from "lodash";

import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import { FixedSizeList } from "react-window";
import Fuse from "fuse.js";
import React from "react";
import SearchIcon from "@material-ui/icons/Search";
import memoize from "memoize-one";

const styles = {
  popoverPaper: {
    width: "100%"
  }
};

const fuseOptions = {
  includeScore: true
};

const initialSearchState = {
  searchValue: ""
};

const getCheckedList = (list) => (!!list ? list : []);

class VirtualisedSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      anchorEl: null,
      ...initialSearchState
    };
  }

  getSearchList = memoize((list, searchValue) => {
    const fuse = new Fuse(list, fuseOptions);
    return !!searchValue ? map(fuse.search(searchValue), (o) => o.item) : list;
  });

  handleSearch = (event) => {
    this.setState({
      ...this.state,
      searchValue: event.target.value
    });
  };

  getCleanSelectedValues = memoize((currentSelectedValues, list) =>
    intersection(currentSelectedValues, list)
  );

  getNewMultipleValue = (currentSelectedValues, clickedItemValue) =>
    includes(currentSelectedValues, clickedItemValue)
      ? difference(currentSelectedValues, [clickedItemValue])
      : union(currentSelectedValues, [clickedItemValue]);

  getNewSingleValue = (currentSelectedValues, clickedItemValue) =>
    includes(currentSelectedValues, clickedItemValue) ? [] : [clickedItemValue];

  getNewValue = (currentSelectedValues, clickedItemValue, list, multiple) =>
    multiple
      ? this.getNewMultipleValue(
          this.getCleanSelectedValues(currentSelectedValues, list),
          clickedItemValue
        )
      : this.getNewSingleValue(currentSelectedValues, clickedItemValue);

  handleChange = (currentSelectedValues, list, multiple) => (event) => {
    this.setState({
      anchorEl: null
    });
    const clickedItemValue = event.target.getAttribute("value");
    const newValue = this.getNewValue(
      currentSelectedValues,
      clickedItemValue,
      list,
      multiple
    );
    this.props.onSelect(newValue);
  };

  getTextFieldDisplayValue = (value, list, labelMap) =>
    join(
      map(this.getCleanSelectedValues(value, list), (e) => labelMap[e] ?? e),
      ", "
    );

  handleMenuOpen = (event) => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleMenuClose = (event) => {
    this.setState({ anchorEl: null, ...initialSearchState });
  };

  renderRow = () => ({ index, style }) => {
    const { multiple, value, list, labelMap } = this.props;
    const { searchValue } = this.state;
    const searchList = this.getSearchList(list, searchValue);

    const cleanSelectedValues = this.getCleanSelectedValues(value, list);
    const listItem = searchList[index];
    return (
      <ListItem
        value={listItem}
        key={listItem}
        selected={includes(value, listItem)}
        onClick={this.handleChange(cleanSelectedValues, list, multiple)}
        style={style}
      >
        {labelMap?.[listItem] || listItem}
      </ListItem>
    );
  };

  render() {
    const {
      value,
      list,
      name,
      label,
      labelMap,
      required = false,
      classes
    } = this.props;
    const { searchValue } = this.state;
    const formControlClassNames = this.props?.classes?.formControl;

    const searchList = this.getSearchList(getCheckedList(list), searchValue);
    const nItems = searchList.length;
    const stringHeight = 46;
    const fixedSizeListHeight = stringHeight * clamp(nItems, 1, 10);

    return (
      <FormControl className={formControlClassNames} fullWidth>
        <TextField
          onClick={this.handleMenuOpen}
          variant="outlined"
          required={required}
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <ArrowDropDownIcon />
              </InputAdornment>
            )
          }}
          value={this.getTextFieldDisplayValue(value, list, labelMap)}
          multiline
          type="text"
          name={name}
          label={label}
          fullWidth
        />
        <Menu
          anchorEl={this.state.anchorEl}
          keepMounted
          open={Boolean(this.state.anchorEl)}
          onClose={this.handleMenuClose}
          PopoverClasses={{ paper: classes.popoverPaper }}
        >
          {/* Search */}
          <Box p={1}>
            <TextField
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon />
                  </InputAdornment>
                )
              }}
              type="text"
              label={"Search"}
              value={searchValue}
              onChange={this.handleSearch}
              fullWidth
            />
          </Box>

          {/* Virtualized list */}
          <FixedSizeList
            height={fixedSizeListHeight}
            width={"100%"}
            itemSize={stringHeight}
            itemCount={nItems}
          >
            {this.renderRow()}
          </FixedSizeList>
        </Menu>
      </FormControl>
    );
  }
}

VirtualisedSelector.defaultProps = {
  value: "",
  list: [],
  name: "",
  label: "",
  labelMap: {},
  required: false
};

export default withStyles(styles)(VirtualisedSelector);

Answer 1

主要问题是您不应该为此使用Menu。 Menu 假定它有 MenuItem 子项，并且具有针对该假设的辅助功能。您看到的行为是由尝试通过键入菜单项文本开头的字符来导航到菜单项的功能引起的。在您的情况下，它正在查找标签“搜索”的文本，然后将焦点移至该“菜单项”(这就是为什么您随后在包含 TextField 的 div 上获得焦点轮廓的原因>).如果将标签更改为“在此处键入”，您会发现“s”有效，但“t”无效。

我的建议是使用 Popover直接(Menu 委托(delegate)给您使用的主要功能的低级组件)。另一种选择是使用 Autocomplete component因为您似乎正在尝试使用 Menu 和弹出式 TextField 来执行您自己的 Autocomplete 组件提供的自定义版本。