Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
a month ago

How can filterOptions be combined with groupBy when using MUI Autocomplete?

I am utilizing MUI's Autocomplete component to group options by facility via the groupBy property and sort them using the filterOptions property. The groupBy property displays the facility name in the header, as intended. By filtering the options by name, I may sometimes encounter a situation where two options with the same facility are not grouped together. However, this is expected behavior. If this occurs, the console will display a warning about duplicate headers. To avoid this warning, I must sort the options with the output of groupBy. Is there any way to address this issue or must I accept it? See the code below: 
<Autocomplete
  options={[
    {
        "name": "foo-1",
        "facility": "foo",
    },
    {
        "name": "foo-3",
        "facility": "foo",
    },
    {
        "name": "bar-2",
        "facility": "bar",
    }
  ]}
  groupBy={(option) => option.facility}
  filterOptions={(options, { inputValue }) => filterOptions(options, inputValue)}
  ...
/>
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can sort the MUI Autocomplete options with the groupBy prop. To do this, you must ensure that the values are sorted systematically in the same dimension as they are grouped to avoid duplicate headers. In your case, you can sort the options with the output of groupBy. Here's an example: 
<Autocomplete
  options={[
    {
        "name": "foo-1",
        "facility": "foo",
    },
    {
        "name": "foo-3",
        "facility": "foo",
    },
    {
        "name": "bar-2",
        "facility": "bar",
    }
  ]}
  groupBy={(option) => option.facility}
  filterOptions={(options, { inputValue }) => filterOptions(options, inputValue)}
  getOptionLabel={(option) => option.name}
  ...
/>
I hope this helps! Let me know if you have any other questions.

Sources

A Guide on Material UI AutoComplete in React | refineMUI Autocomplete using groupBy together with filterOptionsHow to have an option be a part of multiple groups with MUI AutocompleteHow to make a grouped autocomplete in material-ui
avatar
Tolerim
a month ago
The warning is suggesting that you sort the options with the output of groupBy to avoid duplicated headers. You can do this using the sortOptions property of the Autocomplete component. Here's an example: 
<Autocomplete
  options={options}
  groupBy={(option) => option.facility}
  filterOptions={(options, { inputValue }) => filterOptions(options, inputValue)}
  sortOptions={(a, b) =>
    // Sort by facility first
    a.group.localeCompare(b.group) || 
    // Then sort within each group by name
    a.value.name.localeCompare(b.value.name)
  }
  renderOption={(option) => (
    <div>
      <span>{option.value.name}</span>
      <span>{option.group}</span>
    </div>
  )}
/>
In this example, we're using the sortOptions property to sort the options first by facility, and then within each group by name. We're also using the renderOption property to display each option with its name and facility. This should eliminate the duplicated headers and avoid the warning in the console.
;