MUI Autocomplete highlights all items if value is a empty string

Question

I have following problem.

I try to create a custom Autocomplete Component for filtering purposes.

At some point I ran into following Warning.

   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.

In order to fix the warning I have added the "isOptionEqualToValue" prop.

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

But know all of the options are selected(highlighted) if value is "". Image

Here is my whole Component

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>
  );
}

Does anyone have a solution for this issue?

Expected Value No warning and no list items are highlighted if value is a empty string

You might want to look at this: stackoverflow.com/questions/61219164/… — Tiddo
– Tiddo, Commented Nov 29, 2022 at 17:02

Cameron · Accepted Answer · 2024-04-09 19:17:21Z

0

I was having a similar issue. I think the primary problem is that by setting isOptionEqualValue to true on an empty string, you're essentially saying that every option matches with the empty string value (not confirming this, just my intuition).

The way I got around this was by getting rid of the isOptionEqualValue checker, and simply setting the empty string value (the default) as null. Typescript throws an intellisense warning about this, since it doesn't seem to accept multiple types for the value prop, but it doesn't seem to cause any real errors so I just added a tsignore above the value prop

edited Apr 9, 2024 at 19:17

answered Apr 9, 2024 at 19:06

Cameron

3,0153 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MUI Autocomplete highlights all items if value is a empty string

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related