mui-autocomplete-select-all

Dead simple select all functionality for MUI Autocomplete

Usage example

``tsx
import { useState, useMemo } from "react";
import Checkbox from "@mui/material/Checkbox";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import { MuiAutocompleteSelectAll } from "mui-autocomplete-select-all";

export function App() {
const [value, setValue] = useState([]);
const options = useMemo(
() => new Array(100).fill(0).map((_, i) => i.toString()),
[]
);

const selectedAll = value.length === options.length;
return (
value={{
onSelectAll: (selectedAll) => void setValue(selectedAll ? [] : options),
selectedAll,
indeterminate: !!value.length && !selectedAll,
}}
>
value={value}
onChange={(_, newValue) => void setValue(newValue)}
sx={{ width: 200, m: "auto" }}
disableCloseOnSelect
multiple
limitTags={3}
ListboxComponent={MuiAutocompleteSelectAll.ListBox}
disablePortal
options={options}
renderInput={(params) => }
renderOption={(props, option, { selected }) => (

{option}

)}
/>

);
}
`

Quickstart

$3

`bash
npm install mui-autocomplete-select-all
yarn add mui-autocomplete-select-all
pnpm add mui-autocomplete-select-all
`

$3

import { MuiAutocompleteSelectAll } from "mui-autocomplete-select-all";

$3

`tsx
value={{
onSelectAll: (selectedAll) => void setValue(selectedAll ? [] : options),
selectedAll,
indeterminate: !!value.length && !selectedAll,
}}
>
...

`

This values will be used to control select all functionality.

$3

`tsx
...
ListboxComponent={MuiAutocompleteSelectAll.ListBox}
...
/>
``