I am using MUI v5 Autoplete for my dropdown.

I have options with title and id when an option is selected, I want to store the id in the state, also want to update the select (autoplete here) value with selected movie.

The textbox in the select is not reflecting the value set using value props.

I tried isOptionEqualToValue but it helps to highlight the value when the dropdown is open. When drop-down is closed, the selected movie name is not reflected.

=/demo.js

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autoplete from "@mui/material/Autoplete";

export default function ComboBox() {
  const [movie, setMovie] = React.useState(2);

  return (
    <>
      Movie ID value in the state {movie}
      <Autoplete
        disablePortal
        id="bo-box-demo"
        value={movie == null ? "" : movie}
        options={top100Films}
        onChange={(e, data) => {
          if (data && data.id) {
            setMovie(data.id);
          }
        }}
        getOptionLabel={(option) => option.title || ""}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
        isOptionEqualToValue={(option, value) => option.id === value}
      />
    </>
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", id: 1 },
  { title: "The Godfather", id: 2 },
  { title: "The Godfather: Part II", id: 3 }
];

Even when the option is selected, it is not reflecting in the textbox

I am using MUI v5 Autoplete for my dropdown.

I have options with title and id when an option is selected, I want to store the id in the state, also want to update the select (autoplete here) value with selected movie.

The textbox in the select is not reflecting the value set using value props.

I tried isOptionEqualToValue but it helps to highlight the value when the dropdown is open. When drop-down is closed, the selected movie name is not reflected.

https://codesandbox.io/s/bobox-material-demo-forked-osex0?file=/demo.js

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autoplete from "@mui/material/Autoplete";

export default function ComboBox() {
  const [movie, setMovie] = React.useState(2);

  return (
    <>
      Movie ID value in the state {movie}
      <Autoplete
        disablePortal
        id="bo-box-demo"
        value={movie == null ? "" : movie}
        options={top100Films}
        onChange={(e, data) => {
          if (data && data.id) {
            setMovie(data.id);
          }
        }}
        getOptionLabel={(option) => option.title || ""}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
        isOptionEqualToValue={(option, value) => option.id === value}
      />
    </>
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", id: 1 },
  { title: "The Godfather", id: 2 },
  { title: "The Godfather: Part II", id: 3 }
];

Even when the option is selected, it is not reflecting in the textbox

• javascript
• reactjs
• material-ui

1 Answer 1

The value prop should be one of the object in the options array if you want to use the controlled mode:

const getDefaultOption = () => top100Films.find((m) => m.id === 2) ?? null;

export default function ComboBox() {
  const [movie, setMovie] = React.useState(getDefaultOption);

  return (
    <>
      <Box mb={3}>Movie ID value in the state {movie.id}</Box>
      <Autoplete
        disablePortal
        id="bo-box-demo"
        value={movie}
        options={top100Films}
        onChange={(e, data) => setMovie(data)}
        getOptionLabel={(option) => option.title || ""}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
      />
    </>
  );
}