CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Rahul Kumar
Rahul Kumar

Reputation: 2345

MUI Autocomplete custom options, not showing selected option

I am using MUI v5 Autocomplete 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 (autocomplete 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/combobox-material-demo-forked-osex0?file=/demo.js

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

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

  return (
    <>
      Movie ID value in the state {movie}
      <Autocomplete
        disablePortal
        id="combo-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

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

Upvotes: 2

Views: 13377

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81783

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>
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        value={movie}
        options={top100Films}
        onChange={(e, data) => setMovie(data)}
        getOptionLabel={(option) => option.title || ""}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
      />
    </>
  );
}

Codesandbox Demo

Upvotes: 2

Related Questions