如果值为空字符串，MUI 自动完成功能会突出显示所有项目

Question

我有以下问题。

我尝试创建一个自定义自动完成组件以用于过滤目的。

在某些时候我遇到了以下警告。

   MUI: The value provided to Autocomplete is invalid.
None of the options match with `""`.
You can use the `isOptionEqualToValue` prop to customize the equality test.

为了修复警告，我添加了“isOptionEqualToValue”属性。

isOptionEqualToValue={(option, value) => {
    return value === option || value === undefined || value === "";
  }}

但知道如果值为“”，则所有选项都会被选中（突出显示）。

这是我的整个组件

import { Autocomplete, SxProps, TextField, Theme, Tooltip } from "@mui/material";
import { useState } from "react";
import { Clear } from "@mui/icons-material";

interface AusgabefeldProps {
  getFilterValue: () => unknown;
  setFilterValue: (updater: any) => void;
  options: String[];
  sx?: SxProps<Theme>;
}

export function AutocompleteFilterColumnSimpleData(props: AusgabefeldProps) {
  const [value, setValue] = useState("");
  const [toolTipIsOpen, setToolTipIsOpen] = useState(false);

  return (
    <Tooltip
      title="Filter zurücksetzen"
      arrow
      placement="right"
      open={toolTipIsOpen}
      PopperProps={{
        sx: {
          "& .MuiTooltip-tooltip": {
            marginLeft: "0px !important",
            marginTop: "5px",
          },
        },
      }}
    >
      <Autocomplete
        value={value}
        inputValue={value}
        isOptionEqualToValue={(option, value) => {
          return value === option || value === undefined || value === "";
        }}
        sx={{
          "& .MuiInputBase-input ": { height: "1.2rem" },
          "& .MuiAutocomplete-clearIndicator ": {
            visibility: "visible",
            padding: "0px",
            height: "28px",
            width: "28px",
          },
          "& .MuiAutocomplete-clearIndicator:hover ": {
            backgroundColor: value ? "" : "transparent",
          },
          "& .MuiAutocomplete-clearIndicator:active ": {
            pointerEvents: value ? "auto" : "none",
          },
        }}
        onChange={(event, newValue) => {
          setValue(!newValue ? "" : (newValue as string));
          props.setFilterValue(!newValue ? undefined : (newValue as string));
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            onChange={(event) => {
              setValue(event.target.value);
            }}
            style={{ paddingTop: "5px" }}
            variant={"outlined"}
          />
        )}
        options={props.options}
        clearIcon={
          <Clear
            sx={{
              color: value ? "" : "rgba(0, 0, 0, 0.26)",
              cursor: value ? "" : "text",
            }}
            onMouseEnter={() => setToolTipIsOpen(true)}
            onMouseLeave={() => setToolTipIsOpen(false)}
          />
        }
        clearText={""}
        closeText={""}
        openText={""}
      />
    </Tooltip>
  );
}

有人有办法解决这个问题吗？

预期价值 如果值为空字符串，则不会发出警告，也不会突出显示任何列表项

Answer 1

我也遇到了类似的问题。我认为主要问题是，通过在空字符串上将 isOptionEqualValue 设置为 true，您实际上是在说每个选项都与空字符串值匹配（没有确认这一点，只是我的直觉）。

我解决这个问题的方法是去掉 isOptionEqualValue 检查器，然后简单地将空字符串值（默认值）设置为 null。 Typescript 会抛出一个关于此问题的智能感知警告，因为它似乎不接受该值的多种类型，但它似乎不会导致任何真正的错误，所以我只是在

value

prop

上方添加了一个 tsignore